HTML5拖放

Question

I've been having trouble coming up with a way of making a drag and drop area on a web page. 我一直无法想出一种在网页上制作拖放区域的方法。 I have multiple resizable <div> s, and I want to be able to drag these anywhere. 我有多个可调整大小的<div> ，我希望能够将它们拖到任何地方。 Think of it like dragging desktop icons around the desktop and placing them anywhere. 可以想象它就像在桌面上拖动桌面图标并将它们放在任何地方一样。 It would be nice if I could add buttons to these <div> s to change their z-indexes and have them overlap. 如果我可以向这些<div>添加按钮以更改其z索引并使它们重叠，那将是很好的。 Would this require use of <canvas> ? 这需要使用<canvas>吗？ I am currently using <section> for the drag area. 我目前正在使用<section>作为拖动区域。

Thanks! 谢谢！

Answer 1

If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area. 如果你想自己拖放，你可能想要一个包含可拖动div的div，这样你就可以使用较大div的顶部作为可拖动区域。

So, you have 所以你有了

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

This code is purely for example, won't work, btw. 这段代码纯粹是举例，不会起作用，顺便说一句。

So, on the draggablediv you would put an onclick event handler, and this would start an onmousemove handler and onmouseup handler. 所以，在draggablediv你会放一个onclick事件处理程序，这会启动一个onmousemove处理程序和onmouseup处理程序。 The last one is to drop, but you may also want to have onblur in case the mouse moves outside of the browser. 最后一个是放弃，但是如果鼠标移出浏览器，你可能还想要onblur 。

Then, as the mouse moves, just reposition the div, so these divs would need to be absolute positioned, or relative positioned (absolute would be easier). 然后，当鼠标移动时，只需重新定位div，因此这些div需要绝对定位，或相对定位（绝对会更容易）。

It is important to remove the event handlers by setting them to null when the mouse button is released. 通过在释放鼠标按钮时将它们设置为null来删除事件处理程序非常重要。

If not in a droppable area then make certain to put the div back where it started, so you will want a closure so you can remember the original top/left coordinates of the div. 如果不在可放置的区域，那么请确保将div放回到它开始的位置，因此您需要一个闭包，以便您可以记住div的原始顶部/左侧坐标。

You will want to get familiar with this functionality: 您将需要熟悉此功能：

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

For an example search for getImgInPositionedDivHtml in http://jibbering.com/faq/notes/closures/ 有关在http://jibbering.com/faq/notes/closures/中搜索getImgInPositionedDivHtml的示例

In order to change the z-index you may want to have a +/- in the div and when that is clicked on the z-index is changed. 为了更改z-index您可能希望在div中具有+/-，并且在单击时更改z-index。

Here is a page that talks about changing the z-index . 这是一个讨论如何更改z-index 。

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

Answer 2

I don't think you can do that with HTML-Only, however this is some example of how you could do it with javascript: 我不认为你可以用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 个解决方案

解决方案1
1 已采纳 2011-05-22 20:13:34

解决方案2
1 2011-05-22 20:46:23

HTML5拖放

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-05-22 20:13:34

解决方案2 1 2011-05-22 20:46:23

解决方案1
1 已采纳 2011-05-22 20:13:34

解决方案2
1 2011-05-22 20:46:23