jQuery-UI - .droppableからp.arrayに（ほぼそこに！）

Question

サイトは.draggableと.droppable UIを使用して、spanタグのプレーヤーIDを追加しています。これは、以下の段落に追加されます：このJavaScriptによって

  <p class="array goals"></p> 
      <p class="array assist"></p> 
      <p class="array yellow"></p> 
      <p class="array red"></p> 
      <p class="array cap"></p> 

これらのdivから

  <h2>DROP PLAYERS INTO AREAS BELOW</h2> 
      <p>Goals</p> 
      <div class="droppable goals"><p></p></div> 
      <p>Assists</p> 
      <div class="droppable assist"><p></p></div> 
      <p>Yellow card</p> 
      <div class="droppable yellow"><p></p></div> 
      <p>Red card</p> 
      <div class="droppable red"><p></p></div> 
      <p>Captain</p> 
      <div class="droppable cap"><p></p></div> 

（必要なコードにダウンカット）

<script type="text/javascript"> 
$(function() { 
    $(".droppable").droppable({ 
     activeClass: 'dragactive', 
     hoverClass: 'drophover', 
     drop: function(event, ui) { 
      $(".array").append(ui.draggable.children("span").text() + ', ') 
     } 
    }); 

}); 
</script> 

を私が落とし必要2番目のクラスに基づいて正しいp.arrayに入る項目。さて、.droppableの結果はすべての配列クラスに追加されます。

これは、ドラッグ可能なプレイヤーのマークアップの例です：

<div class="drakt spiller draggable"> 
    <span style="visibility: hidden;">58</span> 
    <div class="draktnummer">17</div><p>Traoré</p> 
</div> 

は、あなたがこれで私を助けることができる願っています。

ありがとうございます。

Answer 1

このような何かがうまくいくかもしれない：

drop: function(event, ui) { 
    // clz might need trimming 
    var clz = $(this)[0].className.replace("droppable", ""); 
    $(".array." + clz).append(ui.draggable.children("span").text()) 
} 

もう一つのアイデアは、データ属性を使用することです。あなたはこのようになりますHTMLを生成するPHP変更することができた場合：

<div class="droppable goals" data-droptype="goals"><p></p></div> 

を...これはjQueryの.dataメソッドを介してアクセスdiv要素のプロパティを設定します。それでは上記の機能は次のようになります。

drop: function(event, ui) { 
    $(".array." + $(this).data('droptype')).append(ui.draggable.children("span").text()) 
} 

Answer 2

は、このコードが何を意味するのか本当にわからない...

$(this).find('p') 
      $(".array").append(ui.draggable.children("span").text()) 

はこれに変更してみてください：

$(this).find('p.array').append(ui.draggable.children("span").text()) 

編集：私は、私が見ると思いますあなたが今必要なもの。早く読んでいなかった。あなたが必要とするのは、2番目のブロックの対応するdivにドロップされた後、最初のコードブロックの段落にdraggableのsからテキストを追加することです。

もしそうなら、自分自身の属性をドラッグすることができます。例えば 'myattr'です。これはあなたのドラッグ可能である場合：

<div id="mydrag" myattr="goals" class="draggable"><span>text to append</span></div> 

と、これはあなたのドロップ可能

drop: function(event, ui) { 
    var myattrVal = ui.draggable.attr('myattr'); 
    //Finds the p with the class goals from if the div above was the draggable 
    $('p.' + myattrVal).append(ui.draggable.find('span').text() + ','); 
}