![](/img/trans.png)
[英]Changing the content of a division by clicking a button on the google maps infowindow in another division
[英]Snap a division to another division
我有两个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
元素进行拖动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.