Question

我拖动图像完成here。我试图获取div的id，我开始拖动进程。我怎样才能做到这一点？感谢。

Answer 1

在您链接的示例中，函数drag()由图像节点的onDragStart事件触发。此事件对象被传递给ev的{{1}}参数，使drag()函数能够访问事件的目标 - 也就是您要拖动的元素 - 通过{{1 }}

由于您拥有目标，因此可以使用drag()访问目标的父节点，并且可以通过ev.target访问父节点的ID。

Answer 2

我想记住ev.srcElement.id中的drag()。在drop()上，您可能会在浏览器之外获取内容 - 获取源ID应该是drag()的责任。

Answer 3

这对我有用...改编自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>

如何使用HTML5 Drag＆amp; Drop获取源ID

3 个答案: