3

情况如下 - 一个可拖动的 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/

4

1 回答 1

1

我也一直在尝试从 jQuery UI 中获得这种功能snapMode。这是一种解决方法：

您可以snapMode通过将特定 div 转换为droppable. 当可拖动的可拖放对象被拖动over时，您将它的 snapModeoption从更改outer为inner，然后当它被拖动时out（并且可放置对象不再处于活动状态），您将其更改回来。

这是我对您的小提琴的编辑：http:
//jsfiddle.net/coffeeCola/563UZ/31/
http://jsfiddle.net/coffeeCola/563UZ/43/

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

于 2016-01-17T00:07:26.250 回答