jQuery可拖动隐藏与CSS3多列

我试图做拖放多个CSS3列。我遇到的问题是可拖动的代码位于它旁边的列后面。如果我不使用CSS3列，那么它工作正常。jQuery可拖动隐藏与CSS3多列

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

任何帮助将是巨大的我很感激。

来源

2013-07-02 Nick Burdick

嘿，有你找到了解决办法？我正在尝试做同样的事情。 –

是的，没有。我最终选择了左浮动方法而不是CSS3列，因为对于我的UI，它在响应式布局上效果更好。 JS也有点冒失，因为我不得不克隆/隐藏跨越边界。这是一个修改的[codepen]（http://codepen.io/Nkburdick/pen/xviws）。我不会回答这个问题，因为我没有按照我的要求行事。也许其他人对原始问题有不同的方法。我使用的JS可能有效地用于CSS3列...我没有尝试过。 –

@NickBurdick我添加了一个可能的解决方案，你能看看是否适合你？ –

我修复了使用克隆属性，以及将样式更改为拖动元素。

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)

并在CSS是很重要的宽度限制为经常性项目时，拖动：

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

我添加一些色彩，这是更多的帮助我。

其他的东西是原来的codepen。

注我瘦尼克·伯迪克已经解决这个问题，因为我用的花车改变你的第二个codepen，你已经在使用的辅助克隆和工作正常此代码列：

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

来源

2015-06-14 18:09:49

jQuery可拖动隐藏与CSS3多列

回答

相关问题