html5 放置,HTML5确定放置对象(HTML5 Determine drop drop object)

HTML5确定放置对象(HTML5 Determine drop drop object)

在这个W3School示例中，我可以获得有关事件和目标对象的大量数据，但是如何确定将哪些对象放到目标上？

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

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

Drag the W3Schools image into the rectangle:

In this W3School example I can get lots of data about the event and the target object but how do I determine what object was dropped on to the target?

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

function allowDrop(ev) {

ev.preventDefault();

}

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));

}

Drag the W3Schools image into the rectangle:

原文：https://stackoverflow.com/questions/35656241

更新时间：2019-12-01 12:12

最满意答案

在drop函数中，要放入的元素的ID被定义为“data”。 因此，您可以编写var element = document.getElementById(data)

现在，元素变量是对象，您可以获得所有关于它的信息，将其传递给另一个函数等。

In the drop function, the ID of the element you are dropping in is defined as 'data'. You can therefore write var element = document.getElementById(data)

Now, the element variable is the object and you can get all the information you wan't about it, pass it to another function etc.

相关问答

当我将相同的事件应用到body时意外发现它。 似乎需要在文档主体上使用通常的preventDefault和stopPropagation来监听dragover ： app.on('dragover', document.body, function(event) {

event.preventDefault();

event.stopPropagation();

return false;

});

天啊，我非常讨厌这个API ...... Found it accidentally

...

删除ondragover属性(下面的代码中的最后一行)对我有用： function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.target.removeAttribute("ondragover");

}

Removing the ondragove

...

setData和getData存在许多问题，并且跨浏览器兼容性。 你应该只依赖于愚蠢的旧text/plain 我建议你只传递div A的id ，然后： function handleDragStart(e) {

e.dataTransfer.effectAllowed = 'move';

e.dataTransfer.setData('text/plain', e.target.id);

}

function handleDrop(e) {

var a = documen

...

似乎数据作为dataTransfer的一部分被设置为字符串。 因此，您拥有的dom变量是一个字符串，因此它不是可以作为子项附加的HTML节点 (如果在异常上添加断点，则可以看到这一点) 这是一个可以作为踩点的工作示例(不使用dataTransfer)： https ： //jsfiddle.net/maniator/aopmgvso/ var li = document.querySelectorAll('li');

var currentDragging;

Array.prototype.for

...

在drop函数中，要放入的元素的ID被定义为“data”。 因此，您可以编写var element = document.getElementById(data) 现在，元素变量是对象，您可以获得所有关于它的信息，将其传递给另一个函数等。 In the drop function, the ID of the element you are dropping in is defined as 'data'. You can therefore write var element = documen

...

该事件包含目标拖动元素，因此您可以使用以下命令获取该元素的属性： function dragCheck(ev) {

console.log("im dragging");

console.log(ev.target.getAttribute("data-someinfo"));

}

或者使用jQuery： function dragCheck(ev) {

console.log("im dragging");

console.log($(ev.target).attr('data

...

RaphaelJS是画布的一个很好的替代品。 该库允许您在屏幕上定义对象并为其设置动画。 它有许多在游戏构建中有用的功能： CSS属性的自动动画。 内置拖放功能。 鼠标和触摸(！)事件处理。 内置命中测试。 兼容旧浏览器(是的，谈论你的Internet Explorer！) 改变元素 - 移动，旋转，缩放 高级位置跟踪(转换) 一个成熟的记录 如果你是艺术家，你可以在游戏中使用adobe Illustrator艺术。 A good alternative to canvas is RaphaelJ

...

感谢@tbirell，我找到了这样做的方法 我正在使用Jquery UI 库来改变我在开始时所做的所有逻辑 我没有使用DIV，而是由UL和LI取代它们

• Item 1
• Item 2
• Item 3