Link unit to another unit
I have 2 divs that are inside a div div. The div switch is draggable. I am using jquery-ui
<div id="wrapper"> <div class="biggerDivision"></div> <div class="smallerDivision">>/div> </div> <div class="snapDivision"></div> the wrapper is being dragged because I need to drag both more divivision and lessDivision together, but I only need to bind lessDivision to snapDivision. sizeDivision and lessDivision have different sizes.
JQuery
$('#wrapper').draggable({ snap: ".snapDivision" }); do this snap binding to snapDivision
here is the script for this https://jsfiddle.net/buownnbn/
what changes should I make to bind my lessDivision to snapDivision, and not the whole shell.
+5
1 answer
I could not find an easy way to do this.
This is just the job 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: Cannot drag .biggerDivision item
0