簡體   English   中英

將一個部門划分到另一個部門

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM