Bha*_*esh 5 html javascript jquery jquery-ui jquery-ui-draggable
我有2个div在一个包装div里面.包装div是可拖动的.我正在使用jquery-ui
<div id="wrapper">
<div class="biggerDivision"></div>
<div class="smallerDivision">>/div>
</div>
<div class="snapDivision"></div>
包装器是可拖动的,因为我必须将greaterDivision和smallDivision一起拖动,但是我必须将tinyDivision捕捉到snapDivision.greaterDivision和smallDivision的大小不同
JQuery的:
$('#wrapper').draggable({
snap: ".snapDivision"
});
这样做是将包装器捕捉到snapDivision
这是这个https://jsfiddle.net/buownnbn/的小提琴
我应该做什么改变来将我的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元素拖动