Question

该网站使用.draggable和.droppable UI来附加span标记中的玩家ID。这被附加到以下段落中：

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

来自这些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>

通过此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.array中。现在，.droppable的结果被附加到EVERY数组类。

这是可拖动玩家加成的示例：

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

希望你能帮助我。

提前致谢。

Answer 1

这样的事可能有用：

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>

...这可以通过jQuery的.data方法在div上设置一个属性。那么上面的函数就变成了：

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

Answer 2

我不确定这段代码是什么意思......

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

尝试更改为：

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

编辑：我想我现在看到了你需要的东西。之前没有仔细阅读过。你需要的是将文本从draggable中的s附加到第一个代码块中的段落，然后将它们放入第二个块中相应的div中，对吗？

如果是这样，你可以将自己的属性添加到draggables，比如'myattr'。如果这是你的可拖动：

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

这是您的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() + ',');
}

jQuery-UI - .append从.droppable到p.array（几乎就在那里！）

2 个答案: