javascript - 将元素从 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>

查询：

//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一个 in of sortable，然后使用以下 jQuery：

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

请记住，您需要包含 jQuery UI：

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