我正在尝试使用 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>
J查询:
//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 的大小,而且大小可能会改变,所以我不能真正在顶部和左侧使用过渡。
希望有人能有好的解决办法。
谢谢
最佳答案
您可以使用 jQuery sortable插件。
您可以为每个可拖动的 div
提供一个 sortable
的 in,然后使用以下 jQuery:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
请记住,您需要包含 jQuery UI:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
关于javascript - 将元素从一个 div 移动到另一个 div 时的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19794214/