通過未嵌套的句柄拖動div

在JQueryUI draggable demo中，我可以看到您可以將句柄附加到DIV，但如果句柄未嵌套在可拖動的父DIV中，則不起作用，例如，通過未嵌套的句柄拖動div

<script src="jquery-1.5.2.js"></script> 
    <script src="js/jquery-ui-1.8.11.custom.min.js"></script> 

    <style>  
    #hBlack 
    { 
     width:55px; 
     height:55px; 
     background-color: black; 
     top:0px; 
    } 

    #hGreen 
    { 
     width:25px; 
     height:25px; 
     background-color: green; 


    } 
    </style> 
    <script language="javascript" type="text/javascript"> 
    $(function() { 
     $("#hBlack").draggable({handle:"#hGreen"}); 
     }); 
    </script> 
</head> 

<body> 
    <div id="hBlack"> 
</div> 
<div id="hGreen"></div>

以上不作#hGreen手柄 - 但下列情況：

<div id="hBlack"> 
    <div id="hGreen"></div> 
</div>

從本質上講，我試圖讓一個DIV移動時，另一個動作 - 我猜你可以做到這一點與new Position utility，但對於像我這樣的新手，我發現它記錄不完全

來源

2011-04-21 sami

一個可能的解決方案可能是內部的句柄，但使用CSS將其放置在外面。

的Javascript：

$("#draggable").draggable({handle:"#handle"});

HTML：

<div id="draggable">draggable 
<div id="handle">handle</div> 
</div>

CSS：

#draggable{ 
display: block; 
height: 300px; 
width: 600px; 
background-color: gray; 
} 
#handle{ 
display: block; 
height: 50px; 
width: 600px; 
background-color: green; 
position: relative; 
top: -30px; 
}

否則，你可能需要做類似的多選可拖動的東西。 How do I drag multiple elements at once with JavaScript or jQuery?

來源

2011-04-21 13:04:11 ChrisThompson

燁 - 是有道理的 - 感謝 - 你可能要改變內格「處理」，因爲你的CSS有 – sami 2011-04-21 15:17:40

感謝，這些最後一分鐘的變化得到了我很多的ID。 – ChrisThompson 2011-04-21 15:38:55

通過未嵌套的句柄拖動div

回答

相關問題