jqueryのドロップ可能：クラス化要素数よりclass.eachサイクルもう一度

Question

は、私は要素間の項目を移動するためのjQueryを使用していますjsfiddle

を参照してください。アイテムが新しい要素にドロップされると、そのアイテムのテキストを抜き出したい（それは<div>の中にある）。

$('.box-item').each(function()...のコードは、常に.box-itemのクラスを持つアイテムの合計数よりも1回多く実行されます。

一度ドロップされるアイテムからテキストをキャプチャするにはどうすればよいですか？ TEXTAREA（それぞれの間に新しい行）に4つの項目の入力方法

1. （jsfiddleを参照）をテストする

   ：A、B、 C、D

2. クリックし、 "移入" にします（項目 mainContainerで作成されている）
3. クリック右
上のコンテナのいずれかに上 mainContainerから
4. ドラッグ項目「グループを追加」にここ

は、jQueryのコードです：

$("[id^=container]").droppable({ 
     drop: function(event, ui) { 
      var elemId = $(this).attr("id"); 
      var itemid = $(event.originalEvent.toElement).attr("itemid"); 
      var q = 1; 
      $('.box-item').each(function() { 
       // this section always runs one more time than the number of items 
       console.log (q); 
       var aaa= $(this).closest(".box-container").attr("id"); 
       console.log ("parent div: " + aaa);    

       q++; 
       if ($(this).attr("itemid") === itemid) { 
        // this section gets executed twice 
        var abc = $(this).closest(".box-container").attr("id"); 
        console.log ("from: " + abc);    
        console.log ("append2:" + "<div id='" + elemId + "'>"); 
        $(this).appendTo("#" + elemId); 

        // what is in the div? 
        var txt = $(this).text(); 
        console.log(txt); 
        var abc = $(this).closest(".box-container").attr("id"); 
        console.log ("to: " + abc);     
       } 
      }); 
     } 
    }); 

Answer 1

は同じようにあなたのセレクタを変更：

$('.box-item:not(.ui-draggable-dragging)').each(function() { 

、それが動作します。ドラッグ可能なクローンのクラスもカウントされます。