Dra och släpp in HTML - Exempel för att utföra dra och släpp i HTML

• Introduktion till Drag and Drop i HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Introduktion till Drag and Drop i HTML

Dra och släpp är nu en av de senaste funktionerna i HTML. Dra och släpp är en process som startar när användaren väljer ett dragbart element och placerar detta element i den droppbara komponenten och placerar det på den angivna platsen. Den använder händelsemodellen Document Object Model (DOM) såväl som vissa draghändelser som kommer från mushändelser. Det fungerar som det kraftfullaste gränssnittet som ansvarar för att kopiera, spela in, radera element med en mus. I den senaste HTML-funktionen fungerar Drag and Drop-funktionalitet på de senaste händelserna som dragstart, draend som de många andra händelser kommer att användas.

Händelser för Drag and Drop

Det finns flera händelser som ingår i den senaste dra och släpp (dnd) -funktionen, låt oss se en efter en på följande sätt:

Låt oss se några dataattribut som dra och släpp-operationen kommer att hända:

1. dataTransfer.dropEffect (= värde): Detta attribut används för att visa vilken operation som för närvarande pågår. man kan ställa in den för att ersätta den redan valda åtgärden. Värdena som ingår i den som en kopia, länk, ingen eller flytta.

2. dataTransfer.effectAllowed (= värde): Vilken operation som är tillåten som kommer att returneras genom detta attribut. Det är också möjligt att ställa in för att ändra redan vald operation.

3. dataTransfer.files: Detta dataattribut som används för att få fillista över de filer som kommer att dras.

4. dataTransfer.addElement (element): Det används för att infoga det redan befintliga elementet i en lista med andra element som är användbara för att ge dragåterkopplingen.

5. dataTransfer.setDragImage (element, x, y): Detta attribut lite samma som ovan för att uppdatera drag feedback och hjälpa till att ändra redan existerad feedback

6. dataTransfer.clearData ((format)): Det hjälper användaren att ta bort data från det redan definierade formatet. Om användaren utelämnade argumentet kommer IT att ta bort alla data.

7. dataTransfer.setData (format, data): Det är ett av de populära attributen som används för att lägga till specificerad data.

8. data = dataTransfer.getData (format): Detta attribut i drag och dra-operation som används för att extrahera specificerad data. Om det inte finns samma data som den, återgår den till den tomma strängen

Syntax för dra och släpp i HTML

Här är några steg som definierar syntaxen för dra och släpp:

Välj det objekt som ska dra: ställ attribut riktigt för det.

Börja dra objekt:

function dragStart(ev)()

Släpp objektet:

function dragDrop(ev)()

Exempel på dra och släpp i HTML

Följande exempel visar hur exakt dra och släpp-operationen kommer att fungera i HTML:

Exempel 1

Koda:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Utgång: Före dra- och släppalternativet kommer det att visas som visas nedan:

Efter utförande av drag och släpp kommer operationen att vara som:

Exempel 2

Här kommer vi att se ett annat exempel där vi flyttar bilden från en plats till en annan specificerad plats som visas nedan koden:

Koda:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Demo för bilddrag och släpp