jQuery拖放问题_Jquery_Jquery Ui

jQuery拖放问题

jquery jquery-ui

jQuery拖放问题,jquery,jquery-ui,Jquery,Jquery Ui,我有两个div元素1。div（id=“Dragable”）&div（id=“dropper”）。它们中的每一个都包含几个div。我想把孩子从Dragable拖放到dropper。在我这样做之后，我想在滴管中移动它们。到目前为止，我已经成功地完成了所有的事情，但我无法完成最后一部分。因为draggable中的子项可以在整个文档中移动。谁能帮我做这个 <head> <meta http-equiv="Content-Type" content="text/html; cha

我有两个div元素1。div（id=“Dragable”）&div（id=“dropper”）。它们中的每一个都包含几个div。我想把孩子从Dragable拖放到dropper。在我这样做之后，我想在滴管中移动它们。到目前为止，我已经成功地完成了所有的事情，但我无法完成最后一部分。因为draggable中的子项可以在整个文档中移动。谁能帮我做这个

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <link href="css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="script/jquery-1.9.0.js"> </script>
    <script type="text/javascript" src="script/jquery-ui-1.10.0.custom.js"> </script>
    <script type="text/javascript" src="script/script.js"> </script>
</head>
<body>

    <div id="draggable" class="drop">
        <h4>Drag From Here</h4>
        <div id="wrapper1" class="floatLeft">item1 </div> 
        <div id="wrapper2" class="floatLeft">item2 </div> 
        <div id="wrapper3" class="floatLeft">item3 </div> 
        <div id="wrapper4" class="floatLeft">item4 </div> 

    </div>

    <div id="dropper" class="drop">
        <h4>Drop'em here</h4>
        <div class="floatLeft">item1 </div> 
        <div class="floatLeft">item2 </div> 
        <div class="floatLeft">item3 </div> 
        <div class="floatLeft">item4 </div> 
    </div>
</body>

在我看来，您希望删除的项自动插入到可删除项的DOM结构中，但事实并非如此。这就是为什么你的代码不能满足你的需求。然而，有一个可排序的插件可能正是您想要的。丢弃的div将集成到目标的DOM结构中，这一事实使得满足您的需求变得容易：

$("#draggable").sortable ({
    connectWith: "#dropper",
    items: "> div"
});
$("#dropper").sortable({
    containment: "parent",
    items: "> div"
});

单击链接以查看

$("#draggable").sortable ({
    connectWith: "#dropper",
    items: "> div"
});
$("#dropper").sortable({
    containment: "parent",
    items: "> div"
});