CODEWITHSUNDEEP
htmldrag-and-drop
user1907121
user1907121

Reputation:

drag and drop with words

How could i modify the next code, to do a drag and drop of words?
in such a way that when I select a word of the sentence, 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>

Upvotes: 4

Views: 5237

Answers (3)

Jay Treat
Jay Treat

Reputation: 1

I upgraded this:

  • You can no longer drag words inside of other words, instead they fall in front of them within the container.
  • CSS automatically capitalizes the first word, puts a space between words, and a period at the end.
  • In this example, you're moving 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>

Upvotes: 0

sbmaxx
sbmaxx

Reputation: 896

All words should be wrapped in span or another nodes, here working example without modifying source html ;) http://jsbin.com/ejenub/3

Upvotes: 5

jevakallio
jevakallio

Reputation: 35960

You need to wrap each word in a HTML element such as <span>. Here's a modified version of your sample, which shows the dragging and dropping of words.

Upvotes: 1

Related Questions