HTML DRAG AND DROP FUNCTIONALITY IMPLEMENTATION
Image Drag and Drop into the HTML using JQUERY | DRAG and DROP into the Web Page
first: HTML part in which you can see both drop and draggable div
second: Javascript code to drag and drop div
HTML Part: <div id="div1" draggable="true" ondragstart="drag(event)" class="item" val1="123">my div</div>// this div will be draggable <div ondrop='drop(event)' ondragover='allowDrop(event)' style='background-color:wheat;'></div> //this div will be dropable Javascript Part: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); var target = ev.target || ev.srcElement; var id = target.id; } |
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.