gpt4 book ai didi

jquery - 通过未嵌套的句柄拖动 div

转载 作者:行者123 更新时间:2023-12-01 03:53:17 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com