1

フィドルはこちら

複数選択可能なドラッグ可能な行を含むテーブルがありますが、それらをまとめて別のテーブルにドラッグしてそこにドロップしたい-追加の要素として他のテーブルに追加するのではなく、情報を使って何かをするために、つまり、フォームの提出。

私の例はもともと、ここで見つけた別のデモに基づいています: multi drag demo

この問題の基本的な例の HTML コードを次に示します。 

<table class="DraggableThings">
  <tr draggable='true'><td >Row 1</td></tr>
  <tr draggable='true'><td >Row 2</td></tr>
  <tr draggable='true'><td >Row 3 </td></tr>
</table>

<table id='menu_table'>
  <tbody>
    <tr>
        <td class='droppableItem' >accomplished</td>
    </tr>
  </tbody>
</table>

ここにJQueryコードがあります

$('.droppableItem')
   .bind('dragenter dragover', false)
   .bind('drop', function(event){
       accomplished($(this),event);
});
$('.DraggableThings tr').bind('click', function () {
   $(this).toggleClass("selected");
});
$('.DraggableThings tr').bind('dragstart', function(event){
  var mytext = event.target.innerText;
  event.originalEvent.dataTransfer.setData('txt', mytext );
});
$('.DraggableThings tr').drag("init", function () {
    return $('.selected');
  }).drag(function (ev, dd) {
    $(this).css({
        top: dd.offsetY,
        left: dd.offsetX
    });
});


function accomplished(thing,event) {
  event.dataTransfer = event.originalEvent.dataTransfer;
  var data = event.dataTransfer.getData('txt');
  log(data + " made it to accomplishments");
}

CSS

.selected {
  background-color: #ECB;
}

フィドルはこちら

誰かが答えを知っていることを願っていますありがとう

4

1 に答える 1

2

これはJSFiddleデモンストレーションですが、テーブルの行を修正することをお勧めします。なぜなら、複数の行をドラッグすると、テーブルの行がそれほど離れていないため、あるテーブルの行が別の行と混同されることがあり、配置しようとしているテーブルの行がわからないからです。要素。テスト用に大きくしました。

適切なカテゴリに確実に追加するために、ドラッグするのではなく、クリックする方法で何かを行うことができます。

これは、他の質問と同じコードaction(ui.helper.children(), event);ですが、選択した要素 (およびそれぞれのテキスト) と、テーブル行の内部テキスト (つまり、達成、延期、および削除されました）。

書き換えられたアクション コードは次のとおりです。

function action(a,b) {
    for(var i = 0; i < a.length; i++)
        log(a[i].innerText + " made it to " + b.target.innerText);
}

選択したすべての要素を個別に取得できるように、ループでログに投稿します。b.target.innerTextカテゴリを取得します (ここでも、達成済み、延期済み、削除済み)。それをループしないということは、すべての要素の連結を取得していることを意味します (例: "Row1Row2")。

于 2014-02-17T02:58:34.803 に答える