在 JQueryUI draggable demo ，我可以看到您可以将句柄附加到 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 移动时使一个 DIV 移动 - 我想你可以用 new Position utility 来做到这一点但对于像我这样的新手，我发现它的记录很差
最佳答案
一种可能的解决方案是将 handle 放在内部，但使用 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?
关于jquery - 通过未嵌套的句柄拖动 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5744068/