jQuery-UI - .append z .droppable do p.array (prawie tam!)

Question

Witryna korzysta z .draggable i .droppable UI do dołączania identyfikatorów graczy z tagu span. To jest dołączany do następujących paragrafach:

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

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

Przez ten Javascript (skrócony do niezbędnego kodu)

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

}); 
</script> 

muszę spadła przedmioty, aby dostać się do właściwego p.array na podstawie drugiej klasy. Teraz wynik .droppable jest dołączany do KAŻDEJ klasy macierzy.

To jest przykład dopłaty do przesunięcia gracza:

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

Nadzieję może mi w tym pomóc.

Z góry dziękuję.

Answer 1

Coś jak to może działać:

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

Innym pomysłem jest użycie atrybutów danych. Jeśli można zmienić PHP do produkcji HTML, który wygląda tak:

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

... to ustawia właściwość na div dostępnym poprzez .data metody jQuery. Zatem powyższa funkcja staje się wówczas:

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

Answer 2

nie jestem pewien, co ten kod oznacza ...

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

Spróbuj zmienić to:

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

EDIT: Myślę, że widzę czego potrzebujesz teraz. Nie czytałem tak dokładnie wcześniej. To, czego potrzebujesz, to dołączenie tekstu od s w przeciągalnym do akapitów w pierwszym bloku kodu po tym, jak zostaną zrzucone w odpowiadających im elementach div w drugim bloku, prawda?

Jeśli tak, możesz dodać własny atrybut do przeciągania, powiedz "myattr". Jeśli to jest twój przeciągany:

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

i jest to kod dla Twojego 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() + ','); 
}