2

我正在拖动一个图像，就像它在这里完成的那样。我正在尝试获取 div 的 id，我从中开始拖动过程​​。我怎样才能做到这一点？谢谢。

4

2 回答 2

5

在您链接的示例中，该函数drag()由图像节点的 onDragStart 事件触发。这个事件对象被传递给 的ev参数drag()，使drag()函数可以通过 访问事件的目标——也就是你拖动的元素ev.target。

既然有了目标，就可以用 访问目标的父节点ev.target.parentNode，也可以通过 访问父节点的ID ev.target.parentNode.id。

于 2012-05-11T01:28:37.333 回答
1

这对我有用...改编自 w3schools.com 示例。

打开 Javascript 控制台，查看拖拽项目的 id、源和目标的 console.log。

  <!DOCTYPE HTML>
  <html>
  <head>
  <style>
  .dropbox {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
  }
  </style>
  <script>
  function addEventToClass(cls, fx, node = document, e = 'click') { 
     Array.from(node.querySelectorAll('.' + cls)).forEach(elem => elem.addEventListener(e, fx)); 
  }

  function clickEvent(ev) { console.log('clicked item:', ev.target.id); }
  function allowDrop(ev) { ev.preventDefault(); }

  function drag(ev) {
     var id = ev.target.id;
     ev.dataTransfer.setData("itemid", id);
     var source = id ? document.getElementById(ev.target.id).parentNode.id : '';
     ev.dataTransfer.setData("source", source);
  }

  function drop(ev, target) {
     ev.preventDefault();
     var item = ev.dataTransfer.getData("itemid");
     var source = ev.dataTransfer.getData("source");
     console.log('id of dragged item is:', item);
     console.log('id of source:', source);
     console.log('id of target:', target.id);
     ev.target.appendChild(document.getElementById(item));
  }
  </script>
  </head>
  <body>

  <div id="div1" class='dropbox' ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
  <div id="drag1" class='dragitem' draggable="true" ondragstart="drag(event, this)" width="336" height="69">Item 1</div>
  <div id="drag2" class='dragitem' draggable="true" ondragstart="drag(event, this)" width="336" height="69">Item 2</div>
  <div id="div2" class='dropbox' ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>

  <script>
     addEventToClass('dragitem', clickEvent);
  </script>
  </body>
  </html>
于 2017-08-06T05:19:50.480 回答