通过未嵌套的手柄拖动div [英] Drag div by handle that is not nested
问题描述
在 JQueryUI可拖动演示中，我可以看到您可以将句柄附加到DIV但是如果该句柄未嵌套在可拖动的父DIV中，则它将无法工作，例如
In the JQueryUI draggable demo, I can see you can attach a handle to a DIV but if the handle is not nested within the parent DIV that is draggable, it doesn't work e.g.
<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成为句柄-但以下内容却使之成为
The above doesn't make #hGreen the handle - but the following does:
<div id="hBlack">
<div id="hGreen"></div>
</div>
从本质上讲，我试图在移动另一个DIV时进行移动-我想您可以使用新位置实用程序，但是对于像我这样的新手，我发现它的文献记录不多
Essentially, I am trying to make one DIV move when another moves - I guess you can do it with the new Position utility but for a newbie like me I find it poorly documented
推荐答案
一种可能的解决方案是将手柄置于内部，但使用CSS将其定位在外部.
One possible solution could be to have the handle inside, but use css to position it outside.
JavaScript:
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;
}
否则，您可能必须执行类似于多选可拖动对象的操作. 如何一次拖动多个元素使用JavaScript还是jQuery?
Otherwise, you might have to do something similar to a multiselect draggable. How do I drag multiple elements at once with JavaScript or jQuery?
这篇关于通过未嵌套的手柄拖动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
