HTML5拖放

我一直有想出制作一拖的方式，并在网页上拖放区域的麻烦。我有多个可调整大小的<div> s，我希望能够将这些拖到任何地方。想想它就像在桌面上拖动桌面图标并将其放置在任何地方。这将是很好，如果我可以添加按钮，这些<div> s到改变自己的z索引，并让他们重叠。这是否需要使用<canvas>？我目前使用<section>作为拖拽区域。HTML5拖放

谢谢！

来源

2011-05-22 terrygarcia

你不能使用jQuery可拖动，例如？ http://jqueryui.com/demos/draggable/ – 2011-05-22 19:56:47

使用body元素作为dropzone。捕捉你的（x，y）。使用drop事件来重新定位CSS。不完全是你想要的，但它可能很接近。 – 2011-06-28 17:09:45

看看这个视频w /演示即将到来的IE10。一个人在任何地方都会显示DnD，所以它一定可能。 http://www.pcmag.com/article2/0,2817,2387825,00.asp – 2011-06-30 12:52:19

如果你想要做的阻力正放下了你自己，你可能希望有一个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);

举一个例子搜索getImgInPositionedDivHtml在http://jibbering.com/faq/notes/closures/

为了改变z-index，你可能需要有在一个+/- div和什么时候点击z-index被改变。

这里是谈论改变z-index的页面。

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

来源

2011-05-22 20:13:34

我不认为你可以做到这一点与HTML-只，然而，这是一个如何，你可以用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>

来源

2011-05-22 20:46:23 orbital

回答

相关问题