Draggable + Sortable & Scrollable Divs

J'ai un conteneur avec une liste d'éléments déplaçables et un conteneur avec une liste d'éléments triables. Les draggables & la liste triable est connectée, permettant à l'utilisateur de faire glisser les clones des draggables vers la liste triée.Draggable + Sortable & Scrollable Divs

Les éléments déplaçables apparaissent dans une liste verticale, mais les éléments triables apparaissent dans une liste horizontale, obtenue en les faisant flotter vers la gauche. Le conteneur des éléments triés a son débordement défini sur auto, ce qui entraîne une barre de défilement horizontale si le contenu déborde. Les deux conteneurs apparaissent l'un à côté de l'autre, les traîneaux à gauche & les sortables à droite. Le problème que je rencontre est lorsque le conteneur d'éléments triables défile vers la droite, en faisant glisser depuis le conteneur des draggables déclenche immédiatement les événements des sortables. Il semble que le contenu du conteneur des sortables est déplacé derrière le conteneur des draggables.

Voici mon code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
<head> 
    <title>Sortables in scrollable divs</title> 
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
     $(function() { 
      $("#sortable").sortable({ 
       start: function(event, ui) { 
        if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start"); 
       }, 
       stop: function(event, ui) { 
        if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped"); 
        if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped"); 
       } 
      }); 

      $("#sortable").sortable("disable"); 

      $("#draggable li").draggable({ 
       connectToSortable: '#sortable', 
       helper: 'clone', 
       revert: 'invalid', 
       cursor: "default", 
       cursorAt: { top: -5, left: -5 }, 
       start: function(event, ui) { 
        if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start"); 
       }, 
       stop: function(event, ui) { 
        if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped"); 
       } 
      }); 

      $("#container2").mouseenter(function() { 
       console.log("enter sortable container"); 
       $("#sortable").sortable("enable"); 
      }).mouseleave(function() { 
       console.log("leaving sortable container"); 
       $("#sortable").sortable("disable"); 
      }); 

      $("#draggable, #sortable").disableSelection(); 
     }); 
    </script> 
    <style type="text/css"> 
     html, body, p, td, th, li, input, select, option, textarea 
     { 
      font-family: Verdana, Arial, Helvetica, sans-serif; 
      font-size: 11px; 
      color:#343E41; 
     } 

     .wrapper 
     { 
      position: relative; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      height: expression(this.parentNode.offsetHeight + "px"); 
     } 

     .scroll-wrapper 
     { 
      position: relative; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      height: expression(this.parentNode.offsetHeight + "px"); 
     } 

     #container1 
     { 
      float:left; 
      width:200px; 
      height:400px; 
      overflow:auto; 
      border:solid #000 1px; 
      margin:5px; 
     } 

     #container2 
     { 
      float:left; 
      width:600px; 
      height:400px; 
      overflow:auto; 
      border:solid #000 1px; 
      margin:5px; 
     } 

     ul#draggable 
     { 
      padding:0; 
      margin:0; 
      list-style-image:none; 
      list-style-position:outside; 
      list-style-type:none; 
     } 

     ul#draggable li 
     { 
      display:block; 
      margin:5px; 
      border:solid #000 1px; 
      height:50px; 
      width:150px; 
     } 

     ul#sortable 
     { 
      padding:0; 
      margin:0; 
      list-style-image:none; 
      list-style-position:outside; 
      list-style-type:none; 
      height:380px; 
      width:744px; 
     } 

     ul#sortable li 
     { 
      display:block; 
      float:left; 
      margin:5px; 
      border:solid #000 1px; 
      height:370px; 
      width:50px; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" action=""> 
     <div id="container1"> 
      <ul id="draggable"> 
       <li>1A</li> 
       <li>2A</li> 
       <li>3A</li> 
       <li>4A</li> 
       <li>5A</li> 
       <li>6A</li> 
       <li>7A</li> 
       <li>8A</li> 
       <li>9A</li> 
       <li>10A</li> 
       <li>11A</li> 
       <li>12A</li> 
      </ul> 
     </div> 
     <div id="container2"> 
      <ul id="sortable"> 
       <li class="ui-state-default">1</li> 
       <li class="ui-state-default">2</li> 
       <li class="ui-state-default">3</li> 
       <li class="ui-state-default">4</li> 
       <li class="ui-state-default">5</li> 
       <li class="ui-state-default">6</li> 
       <li class="ui-state-default">7</li> 
       <li class="ui-state-default">8</li> 
       <li class="ui-state-default">9</li> 
       <li class="ui-state-default">10</li> 
       <li class="ui-state-default">11</li> 
       <li class="ui-state-default">12</li> 
      </ul> 
     </div> 
    </form> 
</body>

Comment puis-je éviter les événements triables au feu jusqu'à ce que l'élément est déplacé sur le conteneur sortable?

Merci à l'avance

Source

2009-06-19 Raybiez

Il a été longtemps que j'ai posté cette question et depuis lors, les nouvelles versions de jQuery UI jQuery & a été publié.

En outre, l'équipe de développement de jQuery UI a ajouté un exemple de draggables connectés avec des sortables, ont été ajoutés.

J'ai donc mis à jour mon exemple de code original ci-dessus et je l'ai modifié pour que cela fonctionne sur mon scénario. Je voulais une section triable à défilement horizontal qui se développera automatiquement lorsque de nouveaux éléments auront été ajoutés.

Mon exemple ci-dessous a résolu mon problème et le code semble beaucoup plus propre & plus simple: quelqu'un


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
<head> 
    <title>Sortables in scrollable divs</title> 
     <script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
     <script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $(function() { 
       $("#sortable").sortable({ 
        revert: true, 
        start: function(event, ui) { 
         $(this).width($(this).width() + ui.helper.width() + 12); 
        }, 
        stop: function(event, ui) { 
         var w = 0; 
         $(this).children("li").each(function() { 
          w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2; 
         }); 
         $(this).width(w); 
        } 
       }); 

       var w = 0; 
       $("#sortable").children("li").each(function() { 
        w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2; 
       }); 
       $("#sortable").width(w); 

       $("#draggable li").draggable({ 
        connectToSortable: "#sortable", 
        helper: "clone", 
        revert: "invalid" 
       }); 
       $("ul, li").disableSelection(); 
      }); 
     </script> 
     <style type="text/css"> 
       html, body, p, td, th, li, input, select, option, textarea 
       { 
         font-family: Verdana, Arial, Helvetica, sans-serif; 
         font-size: 11px; 
         color:#343E41; 
       } 

       .wrapper 
       { 
         position: relative; 
         width: 100%; 
         height: 100%; 
         overflow: hidden; 
         height: expression(this.parentNode.offsetHeight + "px"); 
       } 

       .scroll-wrapper 
       { 
         position: relative; 
         width: 100%; 
         height: 100%; 
         overflow: auto; 
         height: expression(this.parentNode.offsetHeight + "px"); 
       } 

       #container1 
       { 
         float:left; 
         width:200px; 
         height:400px; 
         overflow:auto; 
         border:solid #000 1px; 
         margin:5px; 
       } 

       #container2 
       { 
         float:left; 
         width:600px; 
         height:400px; 
         overflow:auto; 
         border:solid #000 1px; 
         margin:5px; 
       } 

       ul#draggable 
       { 
         padding:0; 
         margin:0; 
         list-style-image:none; 
         list-style-position:outside; 
         list-style-type:none; 
       } 

       ul#draggable li 
       { 
         display:block; 
         margin:5px; 
         border:solid #000 1px; 
         height:50px; 
         width:150px; 
       } 

       ul#sortable 
       { 
         padding:0; 
         margin:0; 
         list-style-image:none; 
         list-style-position:outside; 
         list-style-type:none; 
         height:380px; 
       } 

       ul#sortable li 
       { 
         display:block; 
         float:left; 
         margin:5px; 
         border:solid #000 1px; 
         height:370px; 
         width:50px; 
         text-align:center; 
       } 
     </style> 
</head> 
<body> 
    <form id="form1" action=""> 
     <div id="container1"> 
      <ul id="draggable"> 
       <li>1A</li> 
       <li>2A</li> 
       <li>3A</li> 
       <li>4A</li> 
       <li>5A</li> 
       <li>6A</li> 
       <li>7A</li> 
       <li>8A</li> 
       <li>9A</li> 
       <li>10A</li> 
       <li>11A</li> 
       <li>12A</li> 
      </ul> 
     </div> 
     <div id="container2"> 
      <ul id="sortable"> 
       <li class="ui-state-default">1</li> 
       <li class="ui-state-default">2</li> 
       <li class="ui-state-default">3</li> 
       <li class="ui-state-default">4</li> 
       <li class="ui-state-default">5</li> 
       <li class="ui-state-default">6</li> 
       <li class="ui-state-default">7</li> 
       <li class="ui-state-default">8</li> 
       <li class="ui-state-default">9</li> 
       <li class="ui-state-default">10</li> 
       <li class="ui-state-default">11</li> 
       <li class="ui-state-default">12</li> 
      </ul> 
     </div> 
    </form> 
</body>

pensée, pourrait quelque part que faire la même chose et a besoin d'aide: D

Source

2010-11-24 09:56:18 Raybiez

Je mets votre code sur un jsfiddle, donc c'est pratique d'essayer à la volée :) [ici c'est] (http://jsfiddle.net/dHCkK/) – Luke

Draggable + Sortable & Scrollable Divs

Répondre

Questions connexes