Skórki przeciągane jQuery z kolumną wielokrotną CSS3

Próbuję przeciągnąć i upuścić w wielu kolumnach CSS3. Problem, który mam, polega na tym, że przeciąganie przechodzi za kolumnami obok niego. Jeśli nie używam kolumn CSS3, to działa dobrze.Skórki przeciągane jQuery z kolumną wielokrotną CSS3

Zobacz 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; 
    } 
}

coffeescript:

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

Każda pomoc będzie wielki doceniany.

Źródło

2013-07-02 Nick Burdick

Hej, mam znalazłeś rozwiązanie tego? Próbuję zrobić to samo. –

Tak i nie. Skończyło się na tym, że zamiast kolumny CSS3 zastosowałem metodę lewostronną, ponieważ dla mojego interfejsu działała ona lepiej na elastycznych układach. JS również był nieco zjadliwy, ponieważ musiałam klonować/ukrywać się, by przekroczyć granice. Oto zmodyfikowany [codepen] (http://codepen.io/Nkburdick/pen/xviws). Nie odpowiem na to pytanie, ponieważ nie robiłem tego tak, jak prosiłem. Może ktoś inny ma inną metodę pierwotnego pytania. Użyty JS może działać poprawnie dla kolumn CSS3 ... Nie próbowałem go. –

@NickBurdick Dodałem możliwe rozwiązanie, czy możesz sprawdzić, czy ma to sens dla ciebie? –

Naprawię za pomocą właściwości klonu, a także zmieniam styl na element przeciągania.

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)

A w CSS jest istotne ograniczenie w szerokości do powtarzanego-item gdy jest przeciąganie:

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

dodam kilka kolor, który był bardziej mi pomóc .

Pozostałe rzeczy to oryginalny kodek.

Uwaga I cienki Nick Burdick już go rozwiązać, bo mogę zmienić swoją drugą codepen z pływaków i używałeś pomocnika klon i działa dobrze ten kod z kolumnami:

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

Źródło

2015-06-14 18:09:49

Skórki przeciągane jQuery z kolumną wielokrotną CSS3

Odpowiedz

Powiązane problemy