Kann jQuery Sortierbar nicht mit Spalten arbeiten

Question

Ich habe mit Sortierung jQuery gekämpft. Ich versuchte ursprünglich, Nettuts tutorial auf sortierbar zu folgen, fand aber die Spaltenmethode des Dashboard-Layouts zu eng. Ich wollte doppelte Widgets für Graphen usw. haben. Also habe ich eine feste Breite Eltern Widget div und keine Spalten verwenden. Die feste Breite kann 2 reguläre Widgets oder 1 doppelt breites Widget enthalten. Die Widgets wickeln sich einfach schön um den Container herum und ich möchte einfach die Reihenfolge sortieren, in der sich die Widgets befinden.

Das Problem, das ich habe, ist sortierbares Verhalten. Ich kann Widgets ziehen und sortieren, aber der Platzhalter befindet sich nicht an der richtigen Position, wenn das Klicken und Ziehen ausgeführt wird. Wenn ich das untere Widget-Handle ergreife und es verschiebe, wird der Platzhalter oben angezeigt und die Breite des Widget-Containers (#widgets) nicht als das Widget selbst. Ich kann mit Spalten sehen, dass der Platzhalter seine Breite von der Spalte bekommen kann, aber in meinem Fall ist sogar die linke/obere Position nicht korrekt. Der Platzhalter befindet sich ganz oben im Widget-Container.

Außerdem bewegt die Animation das Widget immer nach oben links vom Widget-Container. Wie es denkt, dass der Einfügepunkt oder die vorherige Position oben links war, nicht dort, wo sie eingefügt wurde oder an der vorherigen Position.

Ich weiß, dass ich etwas hier vermisse. Ich habe versucht zu ändern, wo die sortierbare Methode angehängt ist, aber es ändert nichts. Jede Hilfe wäre willkommen!

Ein Stück des gerenderten HTML:

<div id="widgets" class="span9"> 
    <div class="widget span8"> 
    <div class="widget-head"> 
     <h4>Demo Activity 1</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

    <div class="widget span4"> 
    <div class="widget-head"> 
     <h4>Demo Activity 2</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

    <div class="widget span4"> 
    <div class="widget-head"> 
     <h4>Demo Activity 3</h4> 
    </div> 
    <div class="widget-content"> 
     <p>The content...</p> 
    </div> 
    <div class="widget-bottom"></div> 
    </div> 

</div> 

Grund Platzhalter css so kann ich sehen, es tatsächlich:

.widget-placeholder { 
    border: 2px dashed #333; 
} 

Ein Clip des JS, die die sortierbare aufstellt:

$sortableItems = $('> div', '#widgets'); 

    $sortableItems.find('.widget-head').css({ 
     cursor: 'move' 
    }).mousedown(function (e) { 
     $sortableItems.css({width:''}); 
     $(this).parent().css({ 
      width: $(this).parent().width() + 'px' 
     }); 
    }).mouseup(function() { 
     if(!$(this).parent().hasClass('dragging')) { 
      $(this).parent().css({width:''}); 
     } else { 
      $('#widgets').sortable('disable'); 
     } 
    }); 

    $('.widget').sortable({ 
     items: $sortableItems, 
     connectWith: $('#widgets'), 
     handle: '.widget-head', 
     containment: $('#widgets'), 
     revert: 300, 
     delay: 100, 
     opacity: 0.8, 
     placeholder: 'widget-placeholder', 
     containment: 'document', 
     forcePlaceholderSize: true, 
     start: function (e,ui) { 
      $(ui.helper).addClass('dragging'); 
     }, 
     stop: function (e,ui) { 
      $(ui.item).css({width:''}).removeClass('dragging'); 
      $('#widgets').sortable('enable'); 
     } 
    }); 

Answer 1

Fügen Sie Ihrer Platzhalterklasse float: left; hinzu, um sie in der sortierbaren Spalte in der richtigen Reihenfolge zu platzieren.

.widget-placeholder { 
    border: 2px dashed #333; 
    float: left; 
}