jQuery-UI-.добавить из.droppable в массив p. (почти там!)

Сайт использует .перетаскиваемый и .сбрасываемый пользовательский интерфейс для добавления идентификатора игрока из тега span. Это прилагается к следующим абзацам: 

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

От этих дивов

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

С помощью этого javascript (сократите до необходимого кода)

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

});
</script>

Мне нужны отброшенные элементы, чтобы попасть в правильный массив p., основанный на втором классе. Теперь результат из .droppable добавляется к КАЖДОМУ классу массива.

Это пример перетаскиваемого игрока наценка:

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

Надеюсь, вы сможете мне в этом помочь.

Заранее благодарю.

Author: Thomas Maurstad Larsson, 2010-12-14
Source

2 answers

Что-то вроде этого может сработать:

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

Другая идея заключается в использовании атрибутов данных. Если вы можете изменить PHP для создания HTML, который выглядит следующим образом:

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

...это устанавливает свойство для div, доступного с помощью метода jQuery .data. Таким образом, вышеприведенная функция становится:

drop: function(event, ui) {
  $(".array." + $(this).data('droptype')).append(ui.draggable.children("span").text())
}
 2
Author: sje397, 2010-12-14 04:15:03

Я не совсем уверен, что означает этот код...

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

Попробуйте изменить на это: 

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

ПРАВКА: Думаю, я понимаю, что вам сейчас нужно. Раньше не читал так внимательно. Что вам нужно, так это добавить текст из s в перетаскиваемый в абзацы в первом блоке кода после того, как они будут отброшены в соответствующие разделы во втором блоке, верно?

Если это так, вы можете добавить свой собственный атрибут к перетаскиваемым, скажем "myattr". Если это ваш перетаскиваемый:

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

И это код для вашего сбрасываемого

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() + ',');
}
 2
Author: Hersheezy, 2010-12-14 02:26:34