端折っていますが、下記のようなHTML&JavaScriptがあるとして、table要素配下の任意行の任意列（下記例では"BBB"と"CCC"）を同時にDrag&Dropさせるにはどのようにすれば実現できるでしょうか。

selectableで選択するのでは無く、何らかのセレクタ（下記例ではtr.selected td.name）の指定により対象となる要素を決定づけたいと考えていますが可能でしょうか。

<html>
  <head>
    <script type="text/javascript">
      $(function(){
        $('#upper').droppable();
        $('.selected .name').draggable();
      });
    </script>
  </head>
  <body>
    <div id="upper" style="width:300px;height:300px;"></div>
    <div id="lower">
      <table>
        <thead><tr><td>name</td><td>memo</td></tr></thead>
        <tbody>
          <tr><td class="name">AAA</td><td>あああ</td></tr>
          <tr class="selected"><td class="name">BBB</td><td>いいい</td></tr>
          <tr class="selected"><td class="name">CCC</td><td>ううう</td></tr>
          <tr><td class="name">DDD</td><td>えええ</td></tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

「.select .name」は常に一緒でいいのでしょうか？

javascript
1$(function(){
2  $('#upper').droppable();
3  $('.selected .name').draggable({
4  drag: function(e,ui){
5    $('.selected .name').each(function(){
6      $(this).css({
7        top: ui.position.top,
8        left: ui.position.left
9      });
10    });
11  },
12  });
13});

調整版

任意に選ぶ処理

javascript
1<script>
2$(function(){
3  $('#upper').droppable();
4  $('.select').on('change',function(){
5    var target=$('td:has(.select:checked) ~ .name');
6    $(this).closest('td').find('~ .name').draggable().draggable($(this).is(':checked')?'enable':'disable');
7    target.draggable({
8    drag: function(e,ui){
9      target.each(function(){
10        $(this).css({
11        top: ui.position.top,
12        left: ui.position.left
13        });
14      }).draggable('enable');
15    },
16    });
17  }).trigger('change');
18});
19</script>
20    <div id="upper" style="width:300px;height:300px;"></div>
21    <div id="lower">
22      <table>
23        <thead><tr><td>name</td><td>memo</td></tr></thead>
24        <tbody>
25          <tr><td><input type="checkbox" class="select"></td><td class="name">AAA</td><td>あああ</td></tr>
26          <tr><td><input type="checkbox" class="select"></td><td class="name">BBB</td><td>いいい</td></tr>
27          <tr><td><input type="checkbox" class="select"></td><td class="name">CCC</td><td>ううう</td></tr>
28          <tr><td><input type="checkbox" class="select"></td><td class="name">DDD</td><td>えええ</td></tr>
29        </tbody>
30      </table>
31    </div>

投稿2019/11/27 01:21

編集2019/11/27 02:08

yambejp

総合スコア116694

ambiguous

2019/11/27 01:40

セレクタは常に同じですが、対象となる要素（tr.selected td.name）を表示したリストはドラッグ操作前に読み込まれ、ドラッグ直前に対象となる要素が確定されます。イメージとしては、Windowsエクスプローラはファイルリストのようなものでしょうか。フォルダを辿るとフォルダ内のファイル一覧が表示され、その中からある処理の結果としてドラッグ対象となるファイルにtr.selectedが付与される...みたいな感じです。（td.nameは常に付与）

yambejp

2019/11/27 02:10

ロード時にtr.selectedが確定するなら元のソースで行けそうな気もしますが一応いつでも選択を変えられるような応用で調整版あげておきましたこれをベースに調整すればなんとでもナルでしょう

ambiguous

2019/11/27 14:38 編集

提示いただいた調整版を元に修正して何故同時に動かない？と思ったら、同時に動かす部分は$(this).css({...})の部分がキモだったんですね。今日１日コネくり回して、今漸く気がつきました。 $(this).closest('td')...の部分と、その直後のtarget.draggable()で、checkedの場合にはどちらもdraggable('enable')になり（checked:falseの場合は当然対象外になるように見えるのですが）、重複しているように見えるのですがこの部分は何を意味しているのでしょうか？現に$(this).closest('td')...の部分を省いても同じ動きをするように見えるのですが... またrevert: trueにした場合、実際に掴んだ位置にある要素しか元に戻りません。複数に適用できる何か手段はありませんでしょうか。

ambiguous

2019/11/28 13:35

形は変わりましたが提示いただいたソースをベースに本ソースに組み込むことが出来ました。ありがとうございました。ただ未だにrevertの対処だけは上手く行かないので、もう暫く悩むことになりそうです。

行動規範の内容に同意します