将一个分区捕捉到另一个分区

Snap a division to another division

本文关键字：分区 另一个 一个      更新时间：2023-09-26

我有两个div，它们在包装器div中。包装器div是可拖动的。我正在使用jquery ui

<div id="wrapper">
    <div class="biggerDivision"></div>
    <div class="smallerDivision">>/div>
</div>
<div class="snapDivision"></div>

包装器是可拖动的，因为我必须同时拖动biggerDivision和smallerDivision，但我必须只将smallerDivision捕捉到snapDivision。biggerDivision和smallerDivision的大小不同

JQuery:

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

这样做是将包装器捕捉到snapDivision

这是小提琴https://jsfiddle.net/buownnbn/

我应该做什么更改来将我的smallerDivision捕捉到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元素进行拖动

相关文章：