Jquery ui可拖动和可拖拽：将元素对齐到网格的中心

Question

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

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被设置为那个，而不是可丢弃的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; 
}