javascript - HTML5 拖放

Question

我一直无法想出一种在网页上制作拖放区域的方法。我有多个可调整大小的 <div> s，我希望能够将它们拖到任何地方。可以把它想象成在桌面上拖动桌面图标并将它们放置在任何地方。如果我能在这些 <div> 上添加按钮就好了s 更改它们的 z-index 并让它们重叠。这需要使用 <canvas> 吗？ ？我目前正在使用 <section>用于拖动区域。

谢谢!

Answer 1

如果您想自己进行拖放操作，您可能希望有一个 div 包含可拖动的 div，这样您就可以使用较大的 div 的顶部作为可拖动区域。

所以，你有

<div id='draggablediv' style='backgroundcolor: blue;'>
<div class='draggable' style='position: relative; top: 5em; left: 0em;'>...
</div></div>

这段代码纯粹是为了举例，不会起作用，顺便说一句。

因此，在 draggablediv 上，您将放置一个 onclick 事件处理程序，这将启动一个 onmousemove 处理程序和 onmouseup 处理程序。最后一个是 drop，但您可能还需要 onblur，以防鼠标移出浏览器。

然后，当鼠标移动时，只需重新定位 div，因此这些 div 需要绝对定位，或相对定位(绝对定位更容易)。

通过在释放鼠标按钮时将事件处理程序设置为 null 来删除事件处理程序很重要。

如果不在可放置区域中，则确保将 div 放回到它开始的位置，因此您需要一个闭包以便记住 div 的原始顶部/左侧坐标。

您需要熟悉此功能:

(function g(someval) {
    var a = someval;
   return h() {
   }
})(origval);

例如在 http://jibbering.com/faq/notes/closures/ 中搜索 getImgInPositionedDivHtml

为了更改 z-index，您可能需要在 div 中添加一个 +/-，当单击它时，z-index 会更改。

这是一个讨论更改 z-index 的页面。

http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx