Question

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

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

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

包装器是可拖动的，因为我必须将greaterDivision和smallDivision一起拖动，但是我必须只将snapDivision捕捉到snapDivision。 greaterDivision和lowerDivision的大小不同

JQuery的：

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

执行此操作是将包装器捕捉到snapDivision

这是{{3}}

的小提琴

我应该做些什么更改才能将我的smallDivision捕捉到snapDivision而不是整个包装器。

Answer 1

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

这只适用于你的场景

＆＃13;

$('.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"
});

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

已知问题：无法使用.biggerDivision元素进行拖动

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

1 个答案: