jQuery draggable - Je ne peux pas faire glisser mon article

Qui peut me faire une faveur pour rendre mon article draggable à la liste triable connectée. J'ai trouvé que si la liste triable connectée déborde du div avec le style "overflow: auto", l'élément déplaçable ne peut pas être déplacé dedans. Est-ce un bug? Quelqu'un m'aider s'il vous plaît. ! Merci à l'avance :-)jQuery draggable - Je ne peux pas faire glisser mon article

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

Source

2010-11-04 Gerald Dong

me semble comme un bug à

un autre ajout: si vous faites glisser votre draggable de la div avant d'essayer de l'ajouter à la triables cela fonctionne trop

une solution de contournement possible serait le même que le shopping cart example à la section de démonstration jQuery UI. cela ne vous laissera pas trier les articles tout de suite sur le glisser (car ils seront ajoutés à la sortable sur chute), mais il va générer une sortable fonctionnelle et extensible

source:

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

Source

2010-11-04 13:34:39 Guerilla

jQuery draggable - Je ne peux pas faire glisser mon article

Répondre

Questions connexes