javascript - 将元素从一个 div 移动到另一个 div 时的 CSS 过渡

标签 javascript jquery html css

我正在尝试使用 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/

相关文章:

javascript - 在 Angular js中手动设置输入元素的焦点

javascript - 允许在脚本运行完成后单击链接

javascript - Kendo UI,数据网格插入行多次产生请求

javascript - jquery : $ ("selector") or selector as an object variable? 哪个更快

javascript - 每个用户的 Firebase 安全性

javascript - 选择按钮时值变为空

javascript - 如何扩展jQuery的AJAX功能

html - 缩进罗马列表中的段落

javascript - 将按钮的 Action 与其 div 的 Action 隔离

javascript - 是否可以为 React 的类模型打开 React.js 自动绑定(bind)