Question

我是jquery的新手，就像我第一次使用它一样。我的程序执行此操作： 1.对父div中的子div进行排序 2.在两个父div之间拖放

我希望子div在放置在不可丢弃的区域时返回到原始父div。但是它占据了最近的父div。我坚持使用它。请帮帮我。

<!DOCTYPE html>
<html>
<head>
<script type= "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
.nowplaying_history{
    width:100px;
    min-height:400px;
    height:auto;
    padding:0.5em;
    float:left;
    margin:10px;
    border: 1px solid #000;
}
.object_container{
    width:50px;
    height:50px;
    padding:0.5em;
    float:left;
    margin:10px;
    cursor:auto;
    border: 1px solid #000;
}
</style>
<script type: "text/javascript">
$(document).ready(function(){
    $('.nowplaying_history').sortable({
        connectWith: '.ui-sortable',
        revert:true

    })
})
</script>
</head>
<body>
<div id = "left_content" class= "ui-droppable">
<div id = "nowplaying_container" style = "display:block;">
 <div id = "nowplaying-wrapper">
     <div class = "nowplaying_history ui-sortable">
         <div class="object_container ui-draggable">Object 1</div>
         <div class="object_container ui-draggable">Object 2</div>
         <div class="object_container ui-draggable">Object 3</div>
     </div>
<div class = "nowplaying_history ui-sortable">
         <div class="object_container ui-draggable">Object 4</div>
         <div class="object_container ui-draggable">Object 5</div>
         <div class="object_container ui-draggable">Object 6</div>
     </div>
    </div>
    </div>
</div>    


</body>
</html>

这里当我拖动对象1并放到第二个父div旁边的空间时，它应该恢复为原始父级。

谢谢

使用jquery ui sortable恢复原始div

0 个答案: