Question

我有两个div元素1. div（id =“draggable”）＆amp; 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" });


});

Answer 1

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

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

点击该链接查看jsfiddle that uses the sortable plugin

jQuery拖放问题

1 个答案: