jQuery ziehbare verbirgt mit CSS3 multiple Spalte

Ich versuche, Drag & Drop über mehrere CSS3-Spalten. Das Problem, das ich habe, ist, dass das ziehbare hinter die Spalten daneben geht. Wenn ich keine CSS3-Spalten verwende, funktioniert es gut.jQuery ziehbare verbirgt mit CSS3 multiple Spalte

Siehe this Codepen.

HTML:

<div class='row-fluid recurring-items'> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Baking 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-11"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    All Purpose Flour 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Sugar 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Brown Sugar 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Bread &amp; baked goods 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-6"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Whole Wheat Bread 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Canned goods 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-9"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Cereal 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-10"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Condiments &amp; sauces 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-14"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Dijon Mustard 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Dairy 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-3"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Milk 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Deli 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-7"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    Turkey Slices 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Drinks &amp; snacks 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-12"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Dry packaged goods 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-15"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Frozen 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-1"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Meat/poultry 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-4"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Misc 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-8"> 
      <li class='recurring-item'> 
    <!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> --> 
    <span class='handle'>H</span> 
    cream 
    <!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> --> 
</li> 
     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Produce 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-2"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Seafood 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-5"> 

     </ul> 
    </div> 
    <div class='recurring-items-aisle'> 
     <h4 class='recurring-items-header'> 
     Spices 
     </h4> 
     <ul class='unstyled recurring-aisle' id="aisle-13"> 

     </ul> 
    </div> 
</div>

SCSS:

@import "compass/css3"; 

@import "compass/css3"; 


.planning-prefs{ 
    margin-left: 20px; 
} 


@media all and (min-width: 300px) { 
    .recurring-items{ 
    @include column-count(2); 
    @include column-gap(20px); 
    } 
} 

@media all and (max-width: 975px) and (min-width: 600px) { 
    .recurring-items{ 
    @include column-count(3); 
    @include column-gap(20px); 
    } 
} 

@media all and (min-width: 975px) { 
    .recurring-items{ 
    @include column-count(5); 
    @include column-gap(20px); 
    } 
} 

.recurring-items-header{ 
    font-weight: bold; 
    text-decoration: underline; 
} 

.recurring-items-aisle{ 
    display: inline-block; 
    width: 100%; 
} 

.recurring-item{ 
    width: 95%; 
    .handle{ 
    cursor: pointer; 
    } 
}

Coffee:

jQuery -> 
    $('li.recurring-item').draggable 
    handle: '.handle' 
    revert: true 
    appendTo: 'body' 
    $('ul.recurring-aisle').droppable 
    drop: -> 
     alert('dropped')

Jede Hilfe wäre toll lch geschätzt.

Quelle

2013-07-02 Nick Burdick

Hey, haben Sie haben eine Lösung gefunden? Ich versuche das Gleiche zu tun. –

Ja und Nein. Ich habe nach einer Methode mit Linksschwellen statt mit CSS3-Spalten gesucht, weil es für meine Benutzeroberfläche besser auf Responsive-Layouts funktioniert. Das JS war auch ein bisschen hacky, weil ich klonen/verstecken musste, um die Grenzen zu überschreiten. Hier ist ein modifizierter [codepen] (http://codepen.io/Nkburdick/pen/xviws). Ich werde die Frage nicht beantworten, weil ich es nicht so gemacht habe, wie ich es gefragt habe. Vielleicht hat jemand anderes eine andere Methode für die ursprüngliche Frage. Die JS, die ich benutzt habe, könnte wirklich für CSS3-Spalten arbeiten ... Ich habe es nicht ausprobiert. –

@NickBurdick Ich habe eine mögliche Lösung hinzugefügt, können Sie schauen, ob Sinn für Sie? –

Ich repariere mit den Klon-Eigenschaften, und ich ändere den Stil auf das Ziehen-Element.

http://codepen.io/luarmr/pen/KpvpOb

jQuery -> 
    $('li.recurring-item').draggable 
    handle: '.handle' 
    revert: true 
    helper: 'clone' 
    appendTo: 'body' 
    $('ul.recurring-aisle').droppable 
    hoverClass: "dropphover" 
    drop: -> 
     alert(this.innerHTML)

Und in der CSS wichtig ist die Einschränkung in der Breite für wiederkehrenden Punkt, wenn schleppen:

.recurring-item.ui-draggable-dragging{ 
    width:200px; 
}

ich ein paar Farbe hinzufügen, das war mehr, mir zu helfen .

Die anderen Dinge sind die ursprünglichen Codepen.

Hinweis ich dünn Nick Burdick es bereits lösen, weil ich Ihre zweite codepen mit den Schwimmern ändern, und Sie bereits Helfer Klon verwenden und funktioniert diesen Code mit Spalten:

http://codepen.io/luarmr/pen/zGdvvx

Quelle

2015-06-14 18:09:49

jQuery ziehbare verbirgt mit CSS3 multiple Spalte

Antwort

Verwandte Themen