1

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

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

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

我将图像拖放到 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：

-标签：

<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>
4

1 回答 1

2

这确实是 jQuery 的任务。纯 HTML5 除了表示 DOM 元素之外，实际上并不能做更多的事情。JavaScript 至少是 DOM 语言的修饰符；最方便的一个 :) jQuery 完成了您想要解决的大部分复杂任务（也在主要浏览器中），不用担心不使用它。

检查这些文档：

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

幸运的是，互联网上几乎每个 jQuery 函数/子 API 都有数百个不同的示例。尝试谷歌一些例子，它非常容易学习。在这种情况下，jQuery-UI 是主 jQuery 库的扩展，但它真的很简单。只需添加 SCRIPT-tags 即可阅读！

于 2013-02-21T14:18:34.293 回答