Draggable element in javascript

Question

If I want to make a div draggable I have to specify a reference parent or not?For example in jquery,when an element is draggable does it have a reference parent?

Answer 1

To drag an element, you just need to add the draggable attribute and set it's value equal to true.

This will not work on ancient browsers such as Internet Explorer 8 or earlier, because the draggable attribute was nor supported by them.

What you are probably thinking of is a drop target. By default, elements may not be dropped inside other elements.

It's important to note that the following dragging events require an event parameter.

• ondrag: Event is fired whenever an element is being dragged

• ondragstart - Event is fired when the dragging process is started

• ondragend - Event is fired when the dragging process is finished

• ondragenter - Event is fired when the dragged element enters a drop target

• ondragleave - Event is fired when the dragged element leaves a drop target

• ondragover - Event is fired when the dragged element is over a drop target

To allow a drop, we must change the default behavior of browsers through event.preventDefault.

This example is courtesy of W3Schools. However, it is explains the drag and drop functionality. Unfortunately, there are no pseudo classes for dragging and dropping events so we need to use native JavaScript.

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>