jQuery-UI - .appende da .droppable in p.array (quasi lì!)

Question

Il sito utilizza l'interfaccia utente .draggable e .droppable per aggiungere l'ID del giocatore dal tag span. Questo viene aggiunto nei seguenti paragrafi:

  <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> 

Da questi 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> 

Con questo javascript (ridurre al codice necessario)

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

}); 
</script> 

ho bisogno del caduto elementi per entrare nel giusto p.array basato sulla seconda classe. Ora, il risultato di .droppable viene aggiunto ad OGNI classe di array.

Questo è un esempio di mark-up del lettore trascinabile:

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

Spero che mi può aiutare con questo.

Grazie in anticipo.

Answer 1

Qualcosa di simile potrebbe funzionare:

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

Un'altra idea è quella di utilizzare gli attributi di dati. Se è possibile modificare il PHP per la produzione di HTML che assomiglia a questo:

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

... questa imposta una proprietà sul div accessibile tramite il metodo di jQuery .data. Così la funzione di cui sopra diventa allora:

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

Answer 2

non sono veramente sicuro che cosa significa questo codice ...

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

Provare a cambiare a questo:

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

EDIT: mi sembra di vedere quello di cui hai bisogno ora. Non ho letto così attentamente prima. Quello di cui hai bisogno è di aggiungere il testo da s nel trascinabile ai paragrafi nel primo blocco di codice dopo che sono stati rilasciati nelle loro corrispondenti div nel secondo blocco, giusto?

In tal caso, è possibile aggiungere il proprio attributo ai file trascinabili, ad esempio "myattr". Se questa è la vostra trascinabili:

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

e questo è il codice per la droppable

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() + ','); 
}