jQuery UI拖放到中心

Question

我需要一點幫助。 我需要有一個藍色圓圈，一個紅色圓圈，一個藍色方塊和一個紅色方塊。我需要將紅色圓圈拖到紅色正方形的中心，將藍色圓圈拖動到藍色正方形的中心。除非我把它拖到正確的位置，否則它應該恢復到原來的位置。

這是我到目前爲止有：

$("#draggable, #draggable2").draggable({ 
    revert: 'invalid', snap: "#droppable2" 
}); 

$("#droppable").droppable({ 
    accept: '#draggable' 
}); 

$("#droppable2").droppable({ 
    accept: '#draggable2', 
}); 

http://jsfiddle.net/tM7cp/269/

我不能圓圈到正方形的中心位置他們，我該怎麼辦呢？

Answer 1

您可以手動抓拍項目使用jQuery UI的position()實用方法droppables中心如下（我稍微改變你的邏輯，避免代碼和CSS重複）：

$(".draggable").draggable({ 
 
    revert: 'invalid' 
 
}); 
 

 
$(".droppable").droppable({ 
 
    accept: function(item) { 
 
    return $(this).data("color") == item.data("color"); 
 
    }, 
 
    drop: function(event, ui) { 
 
    var $this = $(this); 
 
    ui.draggable.position({ 
 
     my: "center", 
 
     at: "center", 
 
     of: $this, 
 
     using: function(pos) { 
 
     $(this).animate(pos, 200, "linear"); 
 
     } 
 
    }); 
 
    } 
 
});

.draggable { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0.5em; 
 
    margin: 10px 10px 10px 0; 
 
    border: 1px solid black; 
 
    border-radius: 50%; 
 
} 
 
#draggable { 
 
    background-color: red; 
 
} 
 
#draggable2 { 
 
    background-color: blue; 
 
} 
 
.droppable { 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 
#droppable { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
#droppable2 { 
 
    width: 120px; 
 
    height: 120px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="draggable" class="draggable" data-color="red"></div> 
 
<div id="draggable2" class="draggable" data-color="blue"></div> 
 
<div id="droppable" class="droppable" data-color="red"></div> 
 
<div id="droppable2" class="droppable" data-color="blue"></div>