6

複数の CSS3 列でドラッグ アンド ドロップを実行しようとしています。私が抱えている問題は、ドラッグ可能なものが隣の列の後ろにあることです。CSS3 列を使用しない場合、問題なく動作します。

この 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;
  }
}

コーヒースクリプト:

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

どんな助けでも大歓迎です。

4

1 に答える 1

1

クローン プロパティを使用して修正し、スタイルをドラッグ要素に変更します。

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です。

2番目のコードペンをフロートで変更し、すでにヘルパークローンを使用しており、列でこのコードを正常に動作させるため、Nick Burdickがすでに解決していることに注意してください。

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

于 2015-06-14T18:09:49.130 に答える