Question

我一直无法想出一种在网页上制作拖放区域的方法。我有多个可调整大小的<div>，我希望能够将它们拖到任何地方。可以想象它就像在桌面上拖动桌面图标并将它们放在任何地方一样。如果我可以向这些<div>添加按钮以更改其z索引并使它们重叠，那将是很好的。这需要使用<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处理程序。最后一个是删除，但是如果鼠标移出浏览器，你可能还想拥有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

Answer 2

我不认为你可以用HTML-Only做到这一点，但是这是你如何用javascript做的一些例子：

<html>
    <head>
        <style>
            .draggable {
                position: absolute;
                cursor: default;
                background-color: purple;
                top: 0px;
                left: 0px;
            }
        </style>
    </body>
    <body onmouseup="stopMovement()">
        <div id="draggable" class="draggable" onmousedown="startMovement(event)">
            Drag me around :D
        </div>
        <script>
            var drg = document.getElementById("draggable");
            var xDisplacement = 0;
            var yDisplacement = 0;
            function startMovement(e) {
                xDisplacement = e.pageX - getComputedStyle(drg).left.substring(0, getComputedStyle(drg).left.length - 2);
                yDisplacement = e.pageY - getComputedStyle(drg).top.substring(0, getComputedStyle(drg).top.length - 2);
                document.body.onmousemove = moveDraggable;
            }
            function stopMovement() {
                document.body.onmousemove = null;
            }
            function moveDraggable(e) {
                drg.style.top = e.pageY - yDisplacement;
                drg.style.left = e.pageX - xDisplacement;
            }
        </script>
    </body>
</html>

HTML5拖放

2 个答案: