获取已删除的元素id，而不是删除目标id

Get dropped elements id instead of drop target id

本文关键字：删除 id 目标 元素 获取      更新时间：2023-09-26

我是jQuery的新手，我一直在尝试获得一个拖动的图像元素id来附加到放置目标，而不是图像元素本身或放置目标id。我使用的是html5原生DnD。到目前为止，我可以通过drag函数中的datatransfer方法和drop函数中的getdata函数发送元素id来获得要附加的元素本身。无论何时我尝试从drop调用该id，它都会得到drop目标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.)
}

在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。这个简单的例子做得很好。

然而，我只想补充一点，如果您尝试从"；A"；塔格，你运气不会太好。

这将不工作（在所有浏览器中）：

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
 <img src="https://placehold.it/336X69/ff0000" width="336" height="69" />
</a>

然而，这将工作（在更多的浏览器中）：

<img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

我花了很长时间才发现这一点，因为许多浏览器都不返回或不让您获取所拖动内容的源id。这个示例应该在警报中为您显示源id，以及控制台：

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    }
    
    function drop(ev, target) {
        ev.preventDefault();
        console.log(target.id + " : " + ev.target.id) 
        console.log(ev.dataTransfer.getData("text/html")); 
        console.log(ev.dataTransfer.getData("text")); 
        var data = ev.dataTransfer.getData("text");
        alert(data)
    }
</script>
<style "type="text/css">
       #div1 
       { 
          width: 350px; 
          height: 70px; 
          padding: 10px; 
          border: 1px solid #aaaaaa; 
       }
</style>
<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="https://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

我创建了一个简单的拖放示例，您可以将其用作解决问题的示例。有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

为像我这样的人澄清如何获得可拖动元素和可丢弃目标的ID：基于Jason:问题中提供的代码

    function drop(ev) {
          var dataA = ev.dataTransfer.getData("text/html");
          var dataB = ev.target.id;
          //console.log(dataA); ==> This will give "drag1" (object/item being dragged)
          //console.log(dataB); ==>This will give "div1" (area the object is being dragged into, AKA drop target)
          
     }
相关文章：