Snap a division to another division
Question
I have 2 divs which are inside a wrapper div. Wrapper div is draggable. I am using jquery-ui
<div id="wrapper">
<div class="biggerDivision"></div>
<div class="smallerDivision">>/div>
</div>
<div class="snapDivision"></div>
wrapper is draggable because I have to drag both biggerDivision and smallerDivision together but I have to snap only the smallerDivision to snapDivision. biggerDivision and smallerDivision are of different size
JQuery:
$('#wrapper').draggable({
snap: ".snapDivision"
});
doing this is snapping wrapper to snapDivision
here is the fiddle for this https://jsfiddle.net/buownnbn/
what changes should I make to snap my smallerDivision to snapDivision not the whole wrapper.
1 answers
solution1
0 2015-11-01 15:07:39
I was not able to find any straightforward way to do this.
This is only a work around for your scenario
$('.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>
Known issue : not able to drag using .biggerDivision element
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.