获取丢弃的元素 id 而不是丢弃的目标 id

Question

我是 jQuery 的新手，一直在尝试获取拖动的图像元素 ID 以附加到放置目标而不是图像元素本身或放置目标 ID。我正在使用 html5 原生 DnD。到目前为止，我可以通过使用拖动函数中的数据传输方法和放置中的 getdata 函数发送其 id 来获取要追加的元素本身。每当我尝试从放置中调用该 id 时，它都会获取放置目标 id 而不是拖动的元素。

任何帮助将不胜感激，因为我已经在网上进行了彻底搜索，除了找到更多获取放置区域目标 ID 的方法外，什么也没找到。这是我当前代码小提琴的片段：

 function allowDrop(ev) {
ev.preventDefault();
}

function dragStart(ev) {

ev.dataTransfer.setData('Text/html', ev.target.id); // sends the dragged images data.

//alert(ev.target.id); // alerts the correct id of the dragged image.

}

function drop(ev) {

ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");//retrieves dropped images data.
ev.target.appendChild(document.getElementById(data));//this displays the dropped image.

//alert(ev.target.id); // alerts the id of the drop target(Want to get the dropped images id.)

//$("#mybillets").append("<span>"+ev.target.id+" </span>"); //appends the drop targets id(Want to append the dropped images id.)
}

原文由 Jason 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 drop 方法看起来像 ev 是事件对象，所以 ev.target 将引用项目被放置的元素。

所以使用 ev.target.id 来引用放置目标 id。

 function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

function drop(ev, target) {
    ev.preventDefault();
    console.log(target.id, ev.target.id)

    var data = ev.dataTransfer.getData("text/html");
    alert(data)
}

 #div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

 <div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

原文由 Arun P Johny 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我已经创建了简单的拖放示例，也许您可以将其用作您的问题的示例。有 4 个框可以放置图像。只需从下面的列表中抓取一张图片并将其放入上面的框之一。该代码将提醒您所做的动作。

HTML 代码：

   <div id="box1" class="empty">Box 1</div>
  <div id="box2" class="empty">Box 2</div>
  <div id="box3" class="empty">Box 3</div>
  <div id="box4" class="empty">Box 4</div>

<div id="example1" class=" container list-group col" >
  <div id="image1" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/150x150"> Image 1
  </div>
  <div id="image2" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/149x149"> Image 2
  </div>
  <div id="image3" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/151x151"> Image 3
  </div>
  <div id="image4" class="fill " draggable="true">
      <img src="https://source.unsplash.com/random/152x152"> Image 4
  </div>
  <div id="image5" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/153x153"> Image 5
  </div>
  <div id="image6" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/154x154"> Image 6
  </div>
  <div id="image7" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/155x155"> Image 7
  </div>
  <div id="image8" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/156x156"> Image 8
  </div>
  <div id="image9" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/157x157"> Image 9
  </div>
  <div id="image10" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/158x158"> Image 10
  </div>
</div>

Javascript

 const fills = document.querySelectorAll('.fill');
const empties = document.querySelectorAll('.empty');

let object="";
let destiny="";

// Fill listeners
for (const fill of fills) {
  fill.addEventListener('dragstart', dragStart);
  fill.addEventListener('dragend', dragEnd);
}

// Loop through empty boxes and add listeners
for (const empty of empties) {
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);
}

// Drag Functions

function dragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
  console.log('Start');
  objeto = this.id;
}

function dragEnd() {
  //alert('Objeto: '+this.id);
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' hovered';
}

function dragLeave() {
  this.className = 'empty';
}

function dragDrop() {
  //alert('Destino: '+this.id);
  this.className = 'empty';
  destino = this.id;
  showMove();
}

function showMove()
{
  alert('Moving object: '+objeto+' -> to : '+destino);
  console.log('Moving object: '+objeto+' to : '+destino);
}

https://codepen.io/iburguera/pen/jObLaKY?editors=1010

原文由 Iker 发布，翻译遵循 CC BY-SA 4.0 许可协议