jQuery-UI - .append de .droppable dans p.array (presque là!)

Question

Le site utilise l'extension .draggable et .droppable pour ajouter l'identifiant du lecteur à la balise span. Ceci est ajouté dans les paragraphes suivants:

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

A partir de ces divs

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

Par ce javascript (réduit à code nécessaire)

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

}); 
</script> 

J'ai besoin laissé tomber articles pour entrer dans le bon p.array basé sur la deuxième classe. Maintenant, le résultat de .droppable est ajouté à CHAQUE classe de tableau.

Voici un exemple de la majoration du joueur draggable:

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

espère que vous pouvez me aider.

Merci d'avance.

Answer 1

Quelque chose comme cela pourrait fonctionner:

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

Une autre idée est d'utiliser des attributs de données. Si vous pouvez modifier le PHP pour produire du HTML qui ressemble à ceci:

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

... cela crée une propriété sur la div accessible via la méthode .data jQuery. Ainsi, la fonction ci-dessus devient alors:

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

Answer 2

Je ne suis pas vraiment sûr de ce que ce code signifie ...

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

Essayez de changer à ceci:

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

EDIT: Je pense que je vois ce dont tu as besoin maintenant. Je n'ai pas lu si attentivement plus tôt. Ce dont vous avez besoin est d'ajouter le texte de s dans le draggable aux paragraphes dans le premier bloc de code après qu'ils soient déposés dans leurs divs correspondants dans le deuxième bloc, non?

Si oui, vous pouvez ajouter votre propre attribut aux draggables, par exemple 'myattr'. Si c'est est votre draggable:

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

ce qui est le code de votre largable

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