jQuery-UI - .append von .droppable in p.array (fast da!)

Question

Die Website verwendet .draggable und .droppable UI, um die Spieler-ID aus dem span-Tag anzuhängen. Dies wird in den folgenden Absätzen angefügt:

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

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

Durch diese Javascript (bis auf die Lautstärke benötigt Code)

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

}); 
</script> 

ich das abgelegte brauchen Elemente in die richtige p.array basierend auf der zweiten Klasse zu bekommen. Jetzt wird das Ergebnis von .droppable an jede Array-Klasse angehängt.

Dies ist ein Beispiel für die Mark-up des ziehbar Spieler:

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

Hoffe, dass Sie mir dabei helfen kann.

Vielen Dank im Voraus.

Answer 1

So etwas wie dies funktionieren könnte:

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

Eine weitere Idee ist Datenattribute zu verwenden. Wenn Sie die PHP HTML zu erzeugen, verändern können, die wie folgt aussieht:

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

... setzt dies eine Eigenschaft auf dem div erreichbar über die jQuery .data Methode. So ist die obige Funktion wird dann:

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

Answer 2

bin nicht wirklich sicher, was dieser Code bedeutet ...

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

Versuchen Sie, diese zu ändern:

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

EDIT: Ich glaube, ich sehe was du jetzt brauchst. Habe vorher nicht so sorgfältig gelesen. Was Sie brauchen, ist den Text von s in der ziehbaren zu den Absätzen im ersten Codeblock anzuhängen, nachdem sie in den entsprechenden divs im zweiten Block fallen gelassen werden, richtig?

Wenn ja, könnten Sie den ziehbaren Elementen Ihr eigenes Attribut hinzufügen, sagen wir "myattr". Wenn dies Ihr ziehbar:

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

und dies ist der Code für Ihre abwerfbaren

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