jQuery Drag-n-Drop问题

我有两个div元素1. div（id =“draggable”）& div（id =“dropper”）。他们每个人都包含几个div。我想将孩子从draggable拖放到滴管。我这样做后，我想在滴管中移动它们。到目前为止，我已经设法做所有的事情，但是我无法完成最后一部分。因为可拖动的孩子可以移动整个文档。任何人都可以帮助我做到这一点？jQuery Drag-n-Drop问题

<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" }); 


});

来源

2013-02-10 Fawzan

在我看来，你希望自动可投放的DOM结构中插入一个下降的项目 - 但事实并非如此。这就是为什么你的代码不会给你你想要的。但是，有可排序的插件，可能是你在找什么。滴下的股利将被集成在目标的DOM结构，这一事实可以很容易地满足您的要求：

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

点击链接看jsfiddle that uses the sortable plugin

来源

2013-02-10 16:41:17 marty

jQuery Drag-n-Drop问题

回答

相关问题