gpt4 book ai didi

javascript - 将一个部门捕捉到另一个部门

转载 作者:太空狗 更新时间:2023-10-29 16:45:29 24 4
gpt4 key购买 nike

我有 2 个 div,它们位于包装 div 中。包装 div 是可拖动的。我正在使用 jquery-ui

<div id="wrapper">
<div class="biggerDivision"></div>
<div class="smallerDivision">>/div>
</div>

<div class="snapDivision"></div>

wrapper 是可拖动的,因为我必须将 biggerDivision 和 smallerDivision 一起拖动,但我必须只将 smallerDivision 捕捉到 snapDivision。 biggerDivision和smallerDivision大小不同

JQuery:

$('#wrapper').draggable({
snap: ".snapDivision"
});

这样做是将包装器捕捉到 snapDivision

这是 https://jsfiddle.net/buownnbn/ 的 fiddle

我应该做哪些更改才能将 smallerDivision 捕捉到 snapDivision 而不是整个包装器。

最佳答案

我找不到任何直接的方法来做到这一点。

这只是针对您的情况的解决方法

$('.smallerDivision').draggable({
snap: ".snapDivision",
drag : function(event, ui){
$(".biggerDivision").css("top", ui.position.top + 23);
$(".biggerDivision").css("left", ui.position.left - 23);
}
});

$('.biggerDivision').draggable({
handle: ".smallerDivision"
});
.biggerDivision {
height: 100px;
width: 100px;
background-color:red;
position: absolute;
top: 30px
}
.smallerDivision {
height: 100px;
width: 50px;
border-top : 23px solid green;
border-bottom : 50px solid green;
background-color:red;
position: absolute;
left:30px
}
.snapDivision {
height: 50px;
width: 50px;
background-color:blue;
position: absolute;
left: 200px
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<body>
<div id="wrapper">
<div class="biggerDivision"></div>
<div class="smallerDivision"></div>
</div>
<div class="snapDivision"></div>
</body>

已知问题:无法使用 .biggerDivision 元素进行拖动

关于javascript - 将一个部门捕捉到另一个部门,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33459915/

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