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

回答

相關問題