How to drag and drop using javascript
I have a problem with javascript (drag and drop).
// I drag: <div id = "name">Name</div> <div class="color">white</div> <div class="color">black</div> <div class="color">pink</div> //And drop here: <div class="color">yellow</div> <div class="color">green</div> <div class="color">red</div> //result: <div class="color">white</div> <div class="color">black</div> <div class="color">pink</div> <div id="name"> <div class="color">yellow</div> <div class="color">green</div> <div class="color">red</div> </div> //continue drag:<div id = "name">Name</div> other and drop above: <div class="color">green</div> <div class="color">white</div> <div class="color">black</div> <div class="color">pink</div> <div id="name"> <div class="color">yellow</div> </div> <div id ="name"> <div class="color">green</div> <div class="color">red</div> </div> How to drag and drop using javascript. Javascript only. Please help me with an idea or sample code! Thank you all!
I encode this path, for example:
function addDrag(obj,kind){ addEvent(obj, 'dragstart', function (e) { dragSrcEl = obj; e.dataTransfer.setData('text/html', obj.innerHTML); }); addEvent(obj, 'dragover', function (e) { if (e.preventDefault) e.preventDefault(); // allows us to drop $(obj).addClass('dragover'); e.dataTransfer.dropEffect = 'copy'; return false; }); .......... The problem is that I pull out the "Name" and delete any location, class = "color" under "Name", which was the son of "Name" ... "Name" is the parents. how to encode this way! please, help!
+5
1 answer
<!DOCTYPE HTML> <html> <head> <style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> 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)); } </script> </head> <body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> +1