javascript - jQuery 可拖动 - 每个对象具有不同 snapMode 的多个捕捉(到)对象

Question

情况如下 - 一个可拖动的 div，可以捕捉到多个其他 div。我需要实现的目标 - 为不同的 div 指定不同的捕捉模式。例如 - snap:'#firstDiv', snapMode:'inner' 并且对于相同的可拖动 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 变成 droppable 来更改 draggable 的 snapMode。当 draggable 被拖动 over droppable 时，您将其 snapMode option 从 outer 更改为 inner，然后当它被拖出 (并且 droppable 不再处于事件状态)，您将其更改回来。

这是我对你的 fiddle 所做的编辑:
http://jsfiddle.net/coffeeCola/563UZ/31/
http://jsfiddle.net/coffeeCola/563UZ/43/

不幸的是，当 droppable 设置为 tolerance: 'touch' 时，整个事情有点假发了。将其设置为 tolerance: pointer 会创建所需的行为，但在更改选项之前，可拖动对象仍会捕捉到 div 的外部。
[更新]
我能够通过将 droppable 变为元素的父元素并添加比 draggables snapTolerance 稍大的边距/填充来消除上述不需要的行为。