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