Javascript jQuery draggable-多个捕捉（to）对象，每个对象具有不同的捕捉模式

情况如下-一个可拖动的div可以捕捉到多个其他div。我需要实现的是——为不同的div指定不同的捕捉模式。例如-snap:'第一个div'，snapMode:'内部'，对于同一个可拖动div，另一个snap:'第二个div'，snapMode:'外部'

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>

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

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

JS，带有基本的快照：

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

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

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

---

下面是带有上述代码的JSFIDLE:

我也一直在尝试从jQueryUI的

snapMode

中获得这种功能。下面是一个解决方法，它可以实现以下目的：

您可以通过将某个特定div的可拖放模式更改为可拖放模式，方法是将其转换为可拖放模式。将可拖动设备拖动到可拖放设备上时，您可以将其snapMode

选项

从

外部

更改为

内部

，然后将其拖动到外部（且可拖放设备不再处于活动状态）时，您可以将其重新更改

以下是我对您的小提琴所做的编辑：

不幸的是，当下拉菜单被设置为“公差：'触摸'”时，整件事都有点像假发。将其设置为“容差：指针”将创建所需的行为，但在更改选项之前，拖动表仍将捕捉到div的外部。
[更新]

---

我可以通过将Dropable转换为元素的父元素并添加一个略大于Dragables snapTolerance的边距/填充来删除上面描述的不需要的行为。

找到这个问题的答案了吗？我还需要在内部和外部模式中捕捉到多个元素。