HTML 5 drag and drop and with javascript

Question

All,

I'm trying to use HTML5 drag and drop and with javascript. However, I can't get the ability to drop an item into the same location of where the mouse gets released. Anytime I drop an item into the destinationContainer the X and Y coordinates don't work for top and left styles respectively.

I have included a jsfiddle for reference. In addition, I have included the snippet code that represents my drop event.

Thanks for any help!

https://jsfiddle.net/mdevera/94vzuo89/2/

function drop(event) {

console.log("drop");

event.preventDefault();

var id = event.dataTransfer.getData("text/plain");

if ((id === "item1" || id === "item2") && event.target.className === "destinationContainer" ) {

    var clone = document.getElementById(id).cloneNode(true);

    clone.id = Math.floor((Math.random() * 100) + 1);

    /// Style for making item drop in the same mouse location of drop. Does not work.
    //clone.style.top = event.clientY + "px";
    //clone.style.left = event.clientX + "px";


    clone.style.position = "relative";
    event.target.appendChild(clone);

}

}

marc_s · Accepted Answer · 2017-04-13 11:54:48Z

1

You can try to get X or Y position using element.offset().top and element.offset().left using jQuery.

edited Apr 13, 2017 at 11:54

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 12, 2017 at 5:58

Pradip Talaviya

4092 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M_devera Over a year ago

Thank you Pradip, I'm trying to make this happen without jQuery.

Collectives™ on Stack Overflow

HTML 5 drag and drop and with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related