1

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

<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>


#draggable{
height:100px;
border-style:solid;
border-bottom-color:black;
margin-right: 10px;
}


.floatLeft{
    float:left;
    margin:10px 10px 10px 10px;
    border-style:solid;
    border-color: gray;
    cursor: pointer;
}

#dropper{
height: 80px;
/*width: 50%;*/
border-style:solid;
border-bottom-color:black;
margin-right: 10px;
}


$(function(){


$("#draggable").each(function(){

    $("#draggable div").draggable();
}   

);


$("#dropper").droppable(

);

$("#dropper div").draggable({ containment: "parent" });


});
4

1 回答 1

2

在我看来，您希望一个已删除的项目会自动插入到可放置的 DOM 结构中 - 但事实并非如此。这就是为什么你的代码没有给你想要的东西。但是，您可能正在寻找可排序的插件。放置的 div 将集成到目标的 DOM 结构中，这一事实很容易满足您的要求：

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

点击链接查看使用 sortable 插件的 jsfiddle

于 2013-02-10T16:41:17.797 回答