移動動態拖動

我動態地創建使用JavaScript的div元素創建DIV，也有在每個格，讓用戶可以用它來拖動/移動DIV一個移動圖標，這是我的div創建代碼：移動動態拖動

  var _body = document.getElementsByTagName('body')[0]; 
     var _div = document.createElement('div'); 
     _div.style.width = "250px"; 
     _div.style.height = "150px"; 
     _div.style.position = "relative"; 
     _div.id = "div" + count.toString(); 

     var imgMove = document.createElement("img"); 
     imgMove.setAttribute("src", "boxmove.png"); 
     _div.appendChild(imgMove);

當用戶拖動移動圖標，任何其他解決方案時，如何使用JQuery draggable（）函數移動我的div？

來源

2013-11-04 Ali_dotNet

將handle選項設置爲img這意味着圖像將用作拖動控制柄。

_body.appendChild(_div); 
$(_div).draggable({ handle: "img" });

的handle選項是針對在容器內元素的選擇，這樣你就可以通過給圖像需要的類別名稱，如果你在div有多個圖像這將需要更具體，但只想要一個特定的圖像作爲拖動處理程序。

從docs

手柄

如果指定，限制從開始除非指定的元素（一個或多個）上發生鼠標按下拖。只有從可拖動元素下降的元素才被允許。

來源

2013-11-04 07:31:10 MrCode

感謝，它的工作，但你可以解釋一下第二部分，即如何區分兩個圖像，我怎樣才能在這裏設置一個CSS選擇器？ –

哦謝謝，我想我明白了！你幫了我很多，但是有沒有調整div大小的函數？我使用resizable（），但它不起作用 –

只要給你的圖像一個類，例如'myhandler'然後使用'{handle：「img.myhandler」}' – MrCode

這裏是拖和下降快速的解決方案：

<script type="text/javascript"> 
function allowDrop(ev){ 
    ev.preventDefault(); 
} 

function drag(ev){ 
    ev.dataTransfer.setData("Text", ev.target.id); 
} 

function drop(ev){ 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 

} 
</script>

這是HTML標記：

<style type="text/css"> 
[ondragover] {width:200px;height:200px; outline: 1px solid #ccc} 
[draggable] {width:48px;height:48px;background-color:#999; border:1px solid #eaeaea;position:relative} 
[draggable]:hover {cursor:pointer} 
</style> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div> 
    <div id="drag2" draggable="true" ondragstart="drag(event)"></div> 
    <div id="drag3" draggable="true" ondragstart="drag(event)"></div> 
    <div id="drag4" draggable="true" ondragstart="drag(event)"></div> 
</div>

來源

2013-11-04 07:32:53 bodi0

移動動態拖動

回答

相關問題