jQuery-UI - .aplique de .droppable en p.array (¡casi allí!)

Question

El sitio está utilizando .draggable y .Disponible para agregar la ID de los jugadores de la etiqueta span. Esto se agrega en los siguientes párrafos:

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

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

Por este JavaScript (reducido a código necesario)

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

}); 
</script> 

necesito el caer elementos para ingresar al p.array correcto según la segunda clase. Ahora, el resultado de .droppable se agrega a CADA clase de matriz.

Este es un ejemplo de que el jugador pueda arrastrar de mark-up:

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

espero que me puedan ayudar con esto.

Gracias de antemano.

Answer 1

Algo como esto podría funcionar:

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

Otra idea es utilizar atributos de datos. Si puede alterar el PHP para producir HTML que se ve así:

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

... esto establece una propiedad en la div accesible a través de método de jQuery .data. Por lo que la función anterior se convierte en:

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

Answer 2

estoy realmente seguro de lo que significa este código ...

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

Intente cambiar a esto:

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

EDIT: Creo que veo lo que necesitas ahora No lo leí tan cuidadosamente antes. Lo que necesita es agregar el texto de s en el arrastrable a los párrafos en el primer bloque de código después de que se eliminen en sus divs correspondientes en el segundo bloque, ¿verdad?

Si es así, puede agregar su propio atributo a los juegos de arrastre, diga 'myattr'. Si esto es es su arrastrable:

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

y este es el código para su lanzables

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