jquery - jQuery可拖动隐藏与CSS3多列

Question

我正在尝试跨多个 CSS3 列进行拖放。我遇到的问题是可拖动的位于它旁边的列后面。如果我不使用 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;
  }
}

咖啡脚本：

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

任何帮助将不胜感激。

score 1 · Accepted Answer

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

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。

请注意，我瘦 Nick Burdick 已经解决了它，因为我用浮点数更改了您的第二个 codepen，并且您已经使用了 helper clone 并且可以很好地使用此代码与列：

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

jquery - jQuery可拖动隐藏与CSS3多列

1 回答 1

Related

Reference