將元素從div移動到另一個div時的CSS過渡

Question

我正在嘗試使用jquery的html（）在元素周圍移動。 請參見下面的示例。

HTML：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

<div id="myDiv"></div>

jQuery：

//on some event (for example, onclick, onmouseover, onkeydown....), the code below will be triggered
var $myDiv = $("#myDiv");
$("#div1").html($myDiv);
//after some other event, the code below will be triggered
$("#div5").html($myDiv);
//after some other event, the code below will be triggered
$("#div4").html($myDiv);
//etc....

基本上，我試圖使用上面的html（）方法在div1-5之間移動$ myDiv。 但是當$ myDiv從一個div移到另一個div時，我也想進行過渡，我嘗試了以下css，但沒有用。 CSS：

#myDiv {
    -webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
    transition: all 1s linear;
}

我不知道所有div的大小，並且大小可能會改變，所以我不能真正在頂部和左側使用過渡。

希望有人能有一個好的解決方案。

謝謝

Answer 1

您可以使用jQuery 可排序插件。

您可以為每個可拖動的div分配一個sortable ，然后使用以下jQuery：

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

請記住，您將需要包括jQuery UI：

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>