在
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移动 – 我猜你可以用new Position utility做到但是对于像我这样的新手我发现它记录不好
解决方法
一种可能的解决方案是将手柄放在里面,但使用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?
