Draggable-Element in Javascript

Question

Wenn ich ein div ziehbares machen möchte, muss ich ein Referenzelternteil angeben oder nicht? Zum Beispiel in jquery, wenn ein Element ziehbar ist, hat es ein Referenzelternteil?

Answer 1

Um ein Element zu ziehen, müssen Sie nur das draggable Attribut hinzufügen und seinen Wert gleich true setzen.

Dies funktioniert nicht mit alten Browsern wie Internet Explorer 8 oder früher, weil das draggable Attribut von ihnen nicht unterstützt wurde.

Was Sie wahrscheinlich denken, ist ein Drop-Ziel. Standardmäßig dürfen Elemente nicht innerhalb anderer Elemente abgelegt werden.

Es ist wichtig zu beachten, dass die folgenden Drag-Ereignisse einen event Parameter erfordern.

• ondrag: Ereignis ausgelöst wird, wenn ein Element

  gezogen wird

• onDragStart - Ereignis wird ausgelöst, wenn das Ziehen Prozess

• ondragend gestartet wird - Ereignis wird ausgelöst, wenn der Ziehprozess beendet ist

• OnDragEnter - Ereignis wird ausgelöst, wenn das gezogene Element eine Ablegeziel

• OnDragLeave eintritt - Ereignis wird ausgelöst, wenn das gezogene Element eine Ablegeziel

• OnDragOver Blätter - Ereignis wird ausgelöst, wenn der geschleppt Element ist über ein Drop-Ziel

einen Tropfen zu ermöglichen, müssen wir das Standardverhalten von Browsern durchändern.

Dieses Beispiel ist mit freundlicher Genehmigung von W3Schools. Es wird jedoch die Drag-and-Drop-Funktionalität erläutert. Leider gibt es keine pseudo classes zum Ziehen und Ablegen von Ereignissen, so dass wir natives JavaScript verwenden müssen.

http://www.w3schools.com/jsref/event_ondragstart.asp

var demo = document.getElementById("demo"); 
 

 
// Use dataTransfer.setData() to set data type and value of dragged data 
 
// When dragging starts, the paragraph will output text and opacity will decrease 
 
document.addEventListener("dragstart", function(event) { 
 
    event.dataTransfer.setData("Text", event.target.id); 
 
    demo.innerHTML = "Started to drag the p element."; 
 
    event.target.style.opacity = "0.4"; 
 
}); 
 

 
document.addEventListener("drag", function(event) { 
 
    demo.style.color = "red";     // Change color of output text 
 
}); 
 

 
// Output some text when finished dragging the p element and reset the opacity 
 
document.addEventListener("dragend", function(event) { 
 
    demo.innerHTML = "Finished dragging the p element."; 
 
    event.target.style.opacity = "1"; 
 
}); 
 

 

 
/* Events fired on the drop target */ 
 

 
// When the draggable p element enters the droptarget, change the DIVS's border style 
 
document.addEventListener("dragenter", function(event) { 
 
    if (event.target.className == "droptarget") { 
 
     event.target.style.border = "3px dotted red"; 
 
    } 
 
}); 
 

 
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element 
 
document.addEventListener("dragover", function(event) { 
 
    event.preventDefault(); 
 
}); 
 

 
// When the draggable p element leaves the droptarget, reset the DIVS's border style 
 
document.addEventListener("dragleave", function(event) { 
 
    if (event.target.className == "droptarget") { 
 
     event.target.style.border = ""; 
 
    } 
 
}); 
 

 
/* On drop - Prevent the browser default handling of the data (default is open as link on drop) 
 
    Reset the color of the output text and DIV's border color 
 
    Get the dragged data with the dataTransfer.getData() method 
 
    The dragged data is the id of the dragged element ("drag1") 
 
    Append the dragged element into the drop element 
 
*/ 
 
document.addEventListener("drop", function(event) { 
 
    event.preventDefault(); 
 
    if (event.target.className == "droptarget") { 
 
     demo.style.color = ""; 
 
     event.target.style.border = ""; 
 
     var data = event.dataTransfer.getData("Text"); 
 
     event.target.appendChild(document.getElementById(data)); 
 
    } 
 
});

.droptarget { 
 
    float: left; 
 
    width: 100px; 
 
    height: 35px; 
 
    margin: 15px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<p>Drag the p element back and forth between the two rectangles:</p> 
 

 
<div class="droptarget"> 
 
    <p draggable="true" id="dragtarget">Drag me!</p> 
 
</div> 
 

 
<div class="droptarget"></div> 
 

 
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p> 
 

 
<p id="demo"></p>