Question

像我在标题中描述的那样，我想将图像从“列表”中拖出（实际上只是一个div，我将图像加载到数据库中），并希望将其放入“dropzone”中。 / p>

希望每个人都理解我的英语。

我的问题是：我对JavaScript和HTML5全新，我的应用程序只是部分工作。

我拖动图片并将其放入dropzone ...到目前为止一切都很好......但是转移的图像已经不在我的列表中了 - ＆gt;我只是想复制/克隆图像。

将图片放入dropzone后，我的函数只是将图片附加到dropzone ....我知道“appendChild”与它有关，但我不知道如何解决这个问题。

如果有人可以帮助我，那将是非常好的吗？！

JavaScript代码：

//controls the beginning of an drag-event
function dragStart(ev)
{
    ev.dataTransfer.effectAllowed= "copyLink";
    ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
    return true;
}

//handles the dropzone
function dragEnter(ev)
{
 //avoids placing the element somewhere else (instead of in the dropzone)
    event.preventDefault();
    return true;
}

//handles dropping an element before the target area
function dragOver(ev)
{
    return false;
}

//handles the actual drop part (not working)
function dragDrop(ev)
{
    var eleid = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(eleid));
    ev.preventDefault();
    ev.returnValue();
}

HTML：

-Tag：

<img id="person_id_'. $metaData["meta_id"] . '" draggable="true" "ondragstart= "return dragStart(event)" src="'. $path .'"/>

悬浮窗：

<div id= "dropzone" ondragenter= "return dragEnter(event)" ondragover= "return dragOver(event)" ondrop= "return dragDrop(event)"></div>

Answer 1

这真是jQuery的一项任务。纯HTML5实际上不能代表DOM元素。 JavaScript是DOM语言的修饰符，至少;最方便的一个:) jQuery得到了你想要解决的大部分复杂任务（也在主流浏览器中），并且不应该关心不使用它。

检查这些文档：

Dropables可以接受来自其他DIV元素的可拖动元素，例如：http://api.jqueryui.com/droppable/#option

幸运的是互联网上几乎每个jQuery函数/子API都有数百个不同的例子。试试谷歌的一些例子，它非常容易学习。在这种情况下，jQuery-UI是主jQuery库的扩展，但它确实是直截了当的。只需添加SCRIPT标签即可开始阅读！

我想用“HTML”将图像从“div”拖放到另一个div（dropzone）中

1 个答案: