Question

情况如下 - 一个可拖动的div，可以捕捉到多个其他div。我需要实现的 - 为不同的div指定不同的捕捉模式。例如 - snap：'＃firstDiv'，snapMode：'inner'和同一个draggable div另一个snap：'＃secondDiv'，snapMode：'outer'

HTML：

<div class="wrapper">
    <div id="first" class="tile"><p>first</p></div>
    <div id="second" class="tile"><p>second</p></div>
    <div id="third"><p>3</p></div>
</div>

CSS：

.wrapper { 
    width:100%; 
    height:400px; 
    position:relative; 
}
#first, #second, #third { 
    position:absolute; 
    width:100px; 
    height:100px; 
    border:1px solid #000; 
    text-align:center;
}
#first { top:10px; left:10px; }
#second { right:100px; bottom:100px; }

#third {
    width:50px;
    height:50px;
    left:50px;
    top:150px;
}
p { margin:10px; padding:0px; font-weight:bold; }

JS，基本对齐：

$(document).ready(function(){
    $( "#third").draggable({
        containment: '.wrapper',
        cursor: 'move',
        snap: '.tile',
        snapMode: 'outer'
    });     
});

以下代码为jsFiddle：http://jsfiddle.net/563UZ/1/

Answer 1

我也一直试图从jQuery UI的snapMode中获取这种功能。这是类的解决办法：

您可以将特定div的可拖动snapMode更改为droppable。当拖动拖动over droppable时，您将其snapMode option从outer更改为inner，然后拖动它out（并且可放置的是不再活跃），你改回来。

以下是我对你小提琴的编辑：
~~http://jsfiddle.net/coffeeCola/563UZ/31/~~
http://jsfiddle.net/coffeeCola/563UZ/43/

不幸的是，当droppable被设置为tolerance: 'touch'整个假发时。将其设置为tolerance: pointer会创建所需的行为，但在更改选项之前，可拖动的仍会捕捉到div的外部。
的 [更新]
通过将droppable转换为元素的父级并添加了一个略大于draggables snapTolerance的边距/填充，我能够删除上述不需要的行为。

jQuery draggable - 多个snap（to）对象，每个对象具有不同的snapMode

1 个答案: