将一个部门划分到另一个部门

Question

I have 2 divs which are inside a wrapper div. 我有两个div在一个包装div里面。 Wrapper div is draggable. 包装div是可拖动的。 I am using jquery-ui 我正在使用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. 包装器是可拖动的，因为我必须将greaterDivision和smallDivision一起拖动，但是我必须将tinyDivision捕捉到snapDivision。 biggerDivision and smallerDivision are of different size greaterDivision和smallDivision的大小不同

JQuery: JQuery的：

$('#wrapper').draggable({
    snap: ".snapDivision"
});

doing this is snapping wrapper to snapDivision 这样做是将包装器捕捉到snapDivision

here is the fiddle for this https://jsfiddle.net/buownnbn/ 这是这个https://jsfiddle.net/buownnbn/的小提琴

what changes should I make to snap my smallerDivision to snapDivision not the whole wrapper. 我应该做什么改变来将我的smallDivision捕捉到snapDivision而不是整个包装器。

Answer 1

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 已知问题：无法使用.biggerDivision元素进行拖动

将一个部门划分到另一个部门

问题描述

1 个解决方案

解决方案1
0 2015-11-01 15:07:39

将一个部门划分到另一个部门

问题描述

1 个解决方案

解决方案1 0 2015-11-01 15:07:39

解决方案1
0 2015-11-01 15:07:39