1

JqueryUIを使用してドラッグ アンド ドロップを実行しようとしています。

2 つのテーブル間でドラッグ アンド ドロップ機能が必要です。

table1
<table class='table'>
....
 </table>

table2
<table class='table'>
....
 </table>

ユーザーにcellテーブル 1 からテーブル 2 にドラッグしてもらいたい。

以下のコードはそれを達成します

   var dragging =null;

   obj = $('.table td');

   $(obj).draggable({
       cursor:'pointer',
       snap:$('td span'),
       revert: 'invalid'      
   })

   $(obj).droppable({
       //only accept the drop if the cell is empty.
       accept: function(e){
          return $(this).text().trim()=="";
       },

       //replace anything items on table 2.
       drop:function(event, ui){
          $(this).html('&nbsp;').droppable( 'disable' );
       }
   })

私の質問は次のitemAとおりです。テーブル 1 からテーブル 2 にドラッグした後、テーブル 2 にitemAもうドラッグできないようです。テーブル 2 にある場合でも、ユーザーがドラッグできるようにしたいのですitemA。

ここで何がうまくいかなかったのかわかりません。誰でもそれについて私を助けることができますか? 本当にありがとう

4

2 に答える 2

1

ドラッグ可能の問題は、ドラッグした要素が実際には DOM 内で移動しないことです。したがって、元の位置にドラッグして戻そうとすると、それ自体にドロップしようとしています。

理想的には、<td>要素をドラッグする代わりに、要素内のコンテンツをラップしてドラッグする必要が<div>あります。

調整されたコードは次のようになります。

$(function() {

   draggable_obj = $('.table td div');
   droppable_obj = $('.table td');

   $(draggable_obj).draggable({
       cursor:'pointer',
       snap:'td',
       revert: 'invalid'   
   })

   $(droppable_obj).droppable({
       drop:function(event, ui){}
   })
});

これが実際のフィドルです：

http://jsfiddle.net/jjyNS/

要素を DOM 内でも移動する必要がある場合は、要素をドラッグするときに要素を複製し、元の要素を非表示にしてから、要素をドロップするときに複製された要素を追加し、元の要素を削除することができます。

于 2013-08-02T02:34:02.453 に答える