Geek Answers Handbook

Drag and Drop

How can I change the following code, drag and drop words?
such that when I select the word sentences, I can drag

http://jsbin.com/ejenub/1/edit

<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} #div2 {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> verbs <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> adjetives <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="drag1" draggable="true" ondragstart="drag(event)">I play the guitar</div> <div id="drag2" draggable="true" ondragstart="drag(event)">The piano is black</div </body> </html>
+4
source share
3 answers

All words should be wrapped in span or other nodes, here is a working example without changing the source html;) http://jsbin.com/ejenub/3

+4
source

You need to wrap each word in an HTML element, such as <span> . Here's a modified version of your example that shows word drag and drop.

+1
source

I updated this:

  • You can no longer drag words into other words, instead they fall in front of them inside the container.
  • CSS automatically capitalizes the first word, puts a space between words and a period at the end.
  • In this example, you move words within or between two sentences. https://jsbin.com/hayizegisi/edit?html,output
 <!DOCTYPE HTML> <html> <head> <style type="text/css"> .container {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} span {cursor: grabbing;} span::before {content:" "} span:first-child {text-transform:capitalize} span:first-child:before {content:""} span:last-child:after {content:"."} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { console.log(ev) ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); if (ev.target.classList.contains('container')) { var container = ev.target; container.appendChild(document.getElementById(data)); } else { container = ev.target.parentElement; container.insertBefore(document.getElementById(data), ev.target); } } /* function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); }*/ </script> </head> <body> <div class='container' ondrop="drop(event)" ondragover="allowDrop(event)"> <span id="word1" draggable="true" ondragstart="drag(event)">I</span> <span id="word2" draggable="true" ondragstart="drag(event)">play</span> <span id="word3" draggable="true" ondragstart="drag(event)">the</span> <span id="word4" draggable="true" ondragstart="drag(event)">guitar</span> </div> <div class='container' ondrop="drop(event)" ondragover="allowDrop(event)"> <span id="word5" draggable="true" ondragstart="drag(event)">the</span> <span id="word6" draggable="true" ondragstart="drag(event)">piano</span> <span id="word7" draggable="true" ondragstart="drag(event)">is</span> <span id="word8" draggable="true" ondragstart="drag(event)">black</span> </div> </body> </html>
0
source

More articles:


All Articles