Draggable + Sortierbare & Scrollbare Divs

Ich habe einen Container mit einer Liste von ziehbaren Elementen und Container mit einer Liste von sortierbaren Elementen. Die ziehbaren Objekte & Die sortierbare Liste ist verbunden, so dass der Benutzer Klone der ziehbaren Objekte in die sortierte Liste ziehen kann.Draggable + Sortierbare & Scrollbare Divs

Die ziehbaren Elemente werden in einer vertikalen Liste angezeigt. Die sortierbaren Elemente werden jedoch in einer horizontalen Liste angezeigt, indem sie nach links verschoben werden. Für den Container der sortierbaren Elemente ist der Überlauf auf auto eingestellt, was zu einer horizontalen Bildlaufleiste führt, wenn der Inhalt überläuft. Die beiden Container erscheinen nebeneinander, die Ziehpunkte links & die Sortierung nach rechts.

Das Problem, das ich erfahre, ist, wenn der Container mit sortierbaren Elementen nach rechts gescrollt wird, zieht das Ziehen aus dem Container der ziehbaren Objekte sofort die Ereignisse der sortierbaren Objekte. Es sieht so aus, als ob der Inhalt des Containers der Sortiere hinter den Container für die Dragables verschoben wird.

Hier ist mein 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>

Wie kann ich die sortierbare Ereignisse vermeiden Feuer, bis das Element über den sortierbar Behälter gezogen wird?

Vielen Dank im Voraus

Quelle

2009-06-19 Raybiez

Es ist lange her, seit ich diese Frage gestellt und seitdem neue Versionen von jQuery & jQuery UI wurde veröffentlicht.

Darüber hinaus fügte das Entwicklungsteam von jQuery UI ein Beispiel für ziehbare Elemente hinzu, die mit sortierbaren Objekten verbunden sind.

Also habe ich meinen ursprünglichen Beispielcode oben aktualisiert und es so geändert, dass es mein Szenario machts. Ich wollte einen horizontal scrollbaren sortierbaren Abschnitt, der automatisch erweitert wird, wenn neue Elemente hinzugefügt wurden.

unten Mein Beispiel hat mein Problem behoben und der Code sieht viel sauberer & einfacher:


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

man dachte, irgendwo könnte das Gleiche tun und etwas Hilfe braucht: D

Quelle

2010-11-24 09:56:18 Raybiez

ich Ihren Code setzen an einem Kinderspiel, so ist es praktisch, on-the-Fly zu versuchen :) [hier ist es] (http://jsfiddle.net/dHCkK/) – Luke

Draggable + Sortierbare & Scrollbare Divs

Antwort

Verwandte Themen