我有2个div，它们位于包装器div中。包装div可拖动。我正在使用jquery-ui
<div id="wrapper">
<div class="biggerDivision"></div>
<div class="smallerDivision">>/div>
</div>
<div class="snapDivision"></div>
包装器是可拖动的，因为我必须同时将bigerDivision和smallerDivision一起拖动，但是我只需要将smallerDivision捕捉到snapDivision。大分区和小分区的大小不同
jQuery的:
$('#wrapper').draggable({
snap: ".snapDivision"
});
这样做是将包装器捕捉到snapDivision
这是这个https://jsfiddle.net/buownnbn/的 fiddle
我应该进行哪些更改以将我的smallDivision捕捉到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元素进行拖动