jQuery-UI - .append from .droppable into p.array (almost there!)

Question

The site is using .draggable and .droppable UI to append the players ID from the span tag. This is appended into the following paragraphs:

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

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

By this javascript (cut down to needed code)

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

});
</script>

I need the dropped items to get into the right p.array based on the second class. Now, the result from .droppable is appended to EVERY array class.

This is an example of the draggable player's mark-up:

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

Hope you can help me with this.

Thanks in advance.

Answer 1

Something like this might work:

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

Another idea is to use data attributes. If you can alter the PHP to produce HTML that looks like this:

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

...this sets a property on the div accessible via jQuery's .data method. So the above function then becomes:

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

Answer 2

Am not really sure what this code means...

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

Try changing to this:

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

EDIT: I think I see what you need now. Did not read so carefully earlier. What you need is to append the text from s in the draggable to to the paragraphs in the first code block after they are dropped in their corresponding divs in the second block, right?

If so, you could add your own attribute to the draggables, say 'myattr'. If this is is your draggable:

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

and this is the code for your 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() + ',');
}