我一直无法想出一种在网页上制作拖放区域的方法。我有多个可调整大小的 <div>
s,我希望能够将它们拖到任何地方。可以把它想象成在桌面上拖动桌面图标并将它们放置在任何地方。如果我能在这些 <div>
上添加按钮就好了s 更改它们的 z-index 并让它们重叠。这需要使用 <canvas>
吗? ?我目前正在使用 <section>
用于拖动区域。
谢谢!
最佳答案
如果您想自己进行拖放操作,您可能希望有一个 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
关于javascript - HTML5 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6090295/