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

回答

相關問題