Jquery ui draggable and droppable：将元素捕捉到网格的中心

Question

我想知道如何将元素捕捉到网格的中心。在小提琴中你可以看到元素捕捉到边缘，而不是中心。 （如何）可以快速到中间？

http://jsfiddle.net/CbESD/

HTML：

<div id="draggable">drag</div>
<div id="droppable">drop</div>

JS：

$('#draggable').draggable({
    snap: '#droppable',
    snapMode: 'inner'
});

$('#droppable').droppable({});

Answer 1

我无法找到一种简单的方法，所以我创建了一个隐藏的辅助div，以便拖动它。它位于droppable div中，而snap设置为，而不是droppable本身。这应该非常完美地模拟中心按钮。

<强> jsFiddle example

<强>的jQuery

$('#draggable').draggable({
    snap: '#helper',
    snapMode: 'inner'
});
$('#droppable').droppable({});
$('#draggable').clone().html('').prop('id', 'helper').appendTo('#droppable').removeClass('ui-draggable')

<强> CSS

#draggable {
    width: 200px;
    height: 200px;
    border: 2px solid;
    background: red;
    margin-bottom: 10px;
    z-index:1;
}
#droppable {
    width: 350px;
    height: 350px;
    border: 2px solid;
    background: gray;
    position:relative;
}
#helper {
    border: 2px solid transparent;
    position: absolute !important;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    width: 200px;
    height: 200px;
}