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

【问题标题】：Snap a division to another division将一个分区捕捉到另一个分区
【发布时间】：2016-02-01 06:59:34
【问题描述】：

我有 2 个 div，它们位于包装 div 中。 Wrapper div 是可拖动的。我正在使用 jquery-ui

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

<div class="snapDivision"></div>

wrapper 是可拖动的，因为我必须将 largeDivision 和 smallDivision 拖到一起，但我必须只将 smallDivision 捕捉到 snapDivision。 largeDivision 和 smallDivision 的大小不同

JQuery:

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

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

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

我应该进行哪些更改才能将 smallDivision 捕捉到 snapDivision 而不是整个包装器。

【问题讨论】：

这是解决办法，试试吧..jsfiddle.net/kishoresahas/buownnbn/3

标签： javascript jquery html jquery-ui jquery-ui-draggable

【解决方案1】：

我找不到任何直接的方法来做到这一点。

这只是您的方案的解决方法

$('.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 元素拖动

【讨论】：

我必须在包装器上设置可拖动属性，这就是约束，这使得它变得更加困难:(你能建议修改一下吗