jQuery可拖動 - 我無法拖動我的物品

誰可以幫我一個忙，讓我的可拖動項目連接到可連接的可排序列表。我發現如果連接的可排序列表溢出了具有「overflow：auto」風格的div，則可拖動的項目不能被拖入它。這是一個錯誤嗎？任何人都請幫助我。！在先進的感謝:-)jQuery可拖動 - 我無法拖動我的物品

<html> 
<head> 
<title>My MultiSelect</title> 
<script type="text/javascript" src="http://quasipartikel.at/multiselect/js/jquery-1.4.2.min.js"> 
</script> 
<script type="text/javascript" src="http://quasipartikel.at/multiselect/js/jquery-ui-1.8.custom.min.js"> 
</script> 
<style> 
ul{ border: solid 2px yellow; } 
</style> 
</head> 
<body> 
<div style="height: 100px; overflow:auto;"> 
please scroll to bottom to test bug<br/><br/><br/><br/> 
<ul><li id="drag">draggable item</li></ul> 
<ul id="sort"> 
<li>a</li> 
<li>b</li> 
</ul> 
</div> 
<script type="text/javascript"> 
$("#sort").sortable(); 
$("#drag").draggable({ 
connectToSortable: "#sort", 
revert: 'invalid' 
}); 
</script> 
</body> 
</html>

來源

2010-11-04 Gerald Dong

似乎是一個錯誤給我

另一個另外：如果你拖動可拖動出來的div嘗試將其添加到它的工作原理也

可排序前

可能的解決方法與jQuery UI演示部分的shopping cart example相同。這會不會讓你的項目馬上就拖排序（因爲他們將被追加到排序上的下降），但它會產生一個功能性和可擴展排序

來源：

<html> 
    <head> 
     <title>My MultiSelect</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#drag>li").draggable({ 
       revert: 'invalid', 
       helper: 'clone' 
      }); 
      $('#sort').droppable({ 
       accept: ":not(.ui-sortable-helper)", 
       drop: function(event, ui) { 
        $(this).find(".placeholder").remove(); 
        $("<li></li>").text(ui.draggable.text()).appendTo(this); 
       } 
      }).sortable({ 
       items: "li:not(.placeholder)", 
       sort: function() { 
        $(this).removeClass("ui-state-default"); 
       } 
      }); 
     }); 
     </script> 
     <style type="text/css"> 
      ul{ 
       border: solid 2px grey; 
       width:200px; 
      } 
      #main{ 
       border:solid 1px #cdcdcd; 
       width:400px; 
       height: 100px; 
       overflow:auto; 
      } 
     </style> 
    </head> 
    <body> 
    <div id="main"> 
     please scroll to bottom to test bug<br/><br/><br/><br/> 
     <ul id="drag"> 
      <li>draggable item</li> 
     </ul> 
     <ul id="sort"> 
      <li>a</li> 
      <li>b</li> 
     </ul> 
    </div> 
    </body> 
</html>

來源

2010-11-04 13:34:39 Guerilla

jQuery可拖動 - 我無法拖動我的物品

回答

相關問題