4

我怎么能修改下一个代码，做一个拖放的话？
这样当我选择句子的一个词时，我可以拖动

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

3 回答 3

5

所有单词都应包含在 span 或其他节点中，这里是工作示例，无需修改源 html ;) http://jsbin.com/ejenub/3

于 2013-01-06T23:04:05.333 回答
1

您需要将每个单词包装在 HTML 元素中，例如<span>. 这是您的示例的修改版本，它显示了单词的拖放。

于 2013-01-06T22:51:26.640 回答
0

我升级了这个：

  • 您不能再将单词拖到其他单词中，而是将它们放在容器中它们的前面。
  • CSS 自动将第一个单词大写，在单词之间放置一个空格，并在末尾添加一个句点。
  • 在此示例中，您要在两个句子内或两个句子之间移动单词。 https://jsbin.com/hayizegisi/edit?html，输出
<!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>
于 2019-06-05T17:57:15.410 回答