jquery - jQuery UI可拖放:将元素捕捉到网格中心

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

http://jsfiddle.net/CbESD/

HTML：

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

JS：

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

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

最佳答案

我找不到执行此操作的简单方法，因此我为可拖动的对象创建了一个隐藏的帮助div。它位于可放置div内，并且将捕捉设置为该位置，而不是可放置本身。这应该非常完美地模拟中心对齐。

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

关于jquery - jQuery UI可拖放:将元素捕捉到网格中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24432654/