Javascript 获取删除的元素 id 而不是删除目标 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26499462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get dropped elements id instead of drop target id
提问by Jason
I am fairly new to jQuery and am stuck trying to get a dragged image elements id to append to the drop target instead of the image element itself or the drop targets id. I am using the html5 native DnD. And so far I can get the element itself to append by sending through its id with the datatransfer method in the drag function and the getdata function in the drop. Whenever I try to call that id from the drop however it gets the drop target id instead of the dragged elements.
我对 jQuery 相当陌生，并且一直在尝试将拖动的图像元素 id 附加到放置目标，而不是图像元素本身或放置目标 id。我正在使用 html5 本机 DnD。到目前为止，我可以通过使用拖动函数中的 datatransfer 方法和 drop 中的 getdata 函数通过其 id 发送元素本身来追加元素。每当我尝试从放置中调用该 id 时，它都会获取放置目标 id 而不是拖动的元素。
Any help would be greatly appreciated as I have searched thoroughly online and found nothing but more methods to get the target id of the drop area. Here is a snippet of my current code fiddle:
任何帮助将不胜感激，因为我已经在网上彻底搜索并找到了更多方法来获取放置区域的目标 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.)
}
回答by Arun P Johny
In the dropmethod looks like evis the event object, so ev.targetwill refer to the element on which the item was dropped.
在drop方法中看起来像是ev事件对象，因此ev.target将引用放置项目的元素。
So use ev.target.idto refer to the drop target id.
所以使用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" />回答by vr_driver
Thanks to @Arun P Johny. Excellent work on this simple example.
感谢@Arun P Johny。这个简单示例的出色工作。
However, I just wanted to add that if you try and drag from an "A" tag, you won't have much luck.
但是，我只想补充一点，如果您尝试从“A”标签拖动，您将不会有太多运气。
This will notwork (in all browsers):
这会不会（在所有浏览器）工作：
<a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
<img src="//placehold.it/336X69/ff0000" width="336" height="69" />
</a>
However this will work (in more browsers):
但是，这将起作用（在更多浏览器中）：
<img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />
This took me a long time to discover this out, because many of the browsers don't return or let you get the source id of what you are dragging. This example should reveal the source id for you in an alert and also the console:
我花了很长时间才发现这一点，因为许多浏览器不会返回或让您获得所拖动内容的源 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="http://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />
回答by Iker
I have created simple drag and drop example that maybe you can use as example for your problem. There are 4 boxes where images can be dropped to. Just grab a image from the list below and drop it into one of the boxes above. The code will alert the movement you have made.
我创建了简单的拖放示例，也许您可以将其用作解决问题的示例。有 4 个盒子可以放置图像。只需从下面的列表中抓取一张图片并将其放入上面的框中。该代码将提醒您所做的动作。
HTML Code:
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
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);
}
