web-dev-qa-db-ja.com

jquery-uiドラッグ可能でドラッグ可能なオブジェクトをグループ化

Jquery draggable/droppableを使用して、ユーザーがオブジェクトのグループを選択して（それぞれにコーナーにチェックボックスがあります）、選択したすべてのオブジェクトをグループとしてドラッグしたい...

私の人生でどうやってそれをするのかわからない。

これが私が使用可能なソリューションにつながると考えているものです。各ドラッグ可能なオブジェクトで、start（）イベントを使用して、どういうわけか他のすべての選択されたオブジェクトを取得し、それらを選択に追加します

パフォーマンス上の理由から、ドラッグしたオブジェクトをオブジェクトのグループ（画像なので、写真の山）のように見せることも検討していました。一度に数十のオブジェクトをドラッグすると、ドラッグ可能な機能の使用が失敗する可能性があると思いますが、それはより良いアイデアのように聞こえますか？

jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
48
Jiaaro

ドラッグ可能なhelperオプションを使用して、アイテムのグループをドラッグできます。

たとえば、ドラッグ可能なオブジェクトにチェックボックスがある場合、次のようにヘルパー関数から選択したアイテムを返すことができます。

$('#dragSource li').draggable({
  helper: function(){
    var selected = $('#dragSource input:checked').parents('li');
    if (selected.length === 0) {
      selected = $(this);
    }
    var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone());
    return container; 
  }
});

デモ

チェックボックス付きのドラッグ可能な画像とやや流動的なレイアウトでデモをセットアップしました。下部にある「コードスニペットの実行」をクリックして、結果を確認します。

$(function() {

  $('#dragSource li').draggable({
    helper: function() {
      var selected = $('#dragSource input:checked').parents('li');
      if (selected.length === 0) {
        selected = $(this);
      }
      var container = $('<div/>').attr('id', 'draggingContainer');
      container.append(selected.clone());
      return container;
    }
  });

  $('#dropTarget').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
      $(this).append(ui.helper.children());
    }
  });

  $('#selectAll').click(function() {
    $('#dragSource input').prop('checked', true);
    return false;
  });

  $('#selectNone').click(function() {
    $('#dragSource input').prop('checked', false);
    return false;
  });

  $('#selectInvert').click(function() {
    $('#dragSource input').each(function() {
      var $this = $(this);
      if ($this.prop('checked')) {
        $this.prop('checked', false);
      } else {
        $this.prop('checked', true);
      }
    });
    return false;
  });
});
body {
  font-family: sans-serif;
  overflow-x: hidden;
}
div {
  margin: 5px;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
  white-space: nowrap;
}
#selectActions span,
#selectActions li {
  float: left;
  padding: 5px;
}
.droppableContainer {
  width: 48%;
  float: left;
  min-height: 200px
}
.droppableContainer li {
  height: 90px;
  width: 110px;
  margin: 2px;
  background-color: white;
  padding-bottom: 4px;
}
.droppableContainer img {
  width: 90px;
  max-height: 90px;
  max-width: 90px;
  width: 90px;
  vertical-align: middle;
}
.droppableContainer input {
  height: 90px;
  vertical-align: middle;
}
#draggingContainer {
  width: 48%;
}
#draggingContainer input {
  visibility: hidden;
}
#dropTarget {
  border: 3px dashed grey;
}
#dropTarget input {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="selectActions">
  <span>Select:</span>
  <ul>
    <li><a id="selectAll" href="#">all</a>
    </li>
    <li><a id="selectNone" href="#">none</a>
    </li>
    <li><a id="selectInvert" href="#">invert</a>
    </li>
  </ul>
</div>
<div style="clear:left;">
  <div id="dragSource" class="droppableContainer">
    <ul>
      <li>
        <img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/misusing_slang.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/donner.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_new_captcha_approach.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/bug.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/open_source.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/tag_combination.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/a_simple_plan.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/it_might_be_cool.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/hedgeclipper.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pep_talk.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/regular_expressions.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pwned.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/post_office_showdown.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/im_an_idiot.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/pointers.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/chess_photo.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/50_ways.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/e_to_the_pi_times_i.png" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/self-reference.jpg" />
        <input type="checkbox" />
      </li>
      <li>
        <img src="http://imgs.xkcd.com/comics/starwatching.png" />
        <input type="checkbox" />
      </li>
    </ul>
  </div>

  <div id="dropTarget" class="droppableContainer">
  </div>
</div>
78
brianpeiris

これはまさに私がやろうとしていることです。これまでのところ、私は成功していませんが、非常に複雑な方法で この人がやった を見つけました。あなたはそれをチェックすることができたかもしれません。

これはドラッグ可能な機能である必要があります。早く実装してほしい

1
Allen Bargi

私がこれに対して行ったのは、スレーブ/マスター要素に与える関数を作成することです。これにより、マスターのbind（）関数が作成されます（この場合、マスターからのドラッグのみを許可しているので、回避できます）これは私が確信している）、標準のjQuery cssを使用してスレーブが従うようにします。

    function overlap(slave,master) {
        $('a#groupTheseBlocks').click(function(){
            master.bind('drag', groupBlocks);
            slave.draggable('disable');

            // remember where the slave is in relation to the master
            sLeftRef = (slave.offset().left - master.offset().left);
            sTopRef = (slave.offset().top - master.offset().top);
        });


        function groupBlocks() {
            var left = master.offset().left;
            var top = master.offset().top;

            slave.draggable('disable');
            slave.css('left', (left + sLeftRef) + 'px');
            slave.css('top', (top + sTopRef) + 'px');

        } 
    }

実用的な例があれば、これにもっと投稿するでしょう。現状ではこれでうまくいきます。不足しているのは、グループ化する要素とのオーバーラップ（スレーブ、マスター）を呼び出す方法です。私はこれを本当に特定の方法で行っています。あなたはそれを行う方法を賢くすることができます、私は確信しています。

1
kvnn

パフォーマンスのアイデア：

非表示の「グループオブジェクト」を作成します。項目がチェックされたら、それらをグループオブジェクトの子にします。選択されていない場合は、それらをドキュメントボディの子として設定するか、静的な親などにします。オブジェクトがジャンプしないように、オブジェクトの位置を変換する必要があります。また、マウスイベントハンドラーをグループの子に追加/削除するときに、それらにアタッチ/デタッチします。

いずれかの子でマウスダウン/アップイベントを取得すると、実際に移動するのはそのグループオブジェクトです。

これにより、全体的にシンプルになります。

1
Paul