HTML5拖放
[英]HTML5 Drag and Drop
問題描述
我一直無法想出一種在網頁上制作拖放區域的方法。 我有多個可調整大小的<div> ，我希望能夠將它們拖到任何地方。 可以想象它就像在桌面上拖動桌面圖標並將它們放在任何地方一樣。 如果我可以向這些<div>添加按鈕以更改其z索引並使它們重疊，那將是很好的。 這需要使用<canvas>嗎？ 我目前正在使用<section>作為拖動區域。
謝謝！
2 個解決方案
解決方案1
1 已采納 2011-05-22 20:13:34
如果你想自己拖放，你可能想要一個包含可拖動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
解決方案2
1 2011-05-22 20:46:23
我不認為你可以用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拖放
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.