该站点使用 .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 的结果附加到每个数组类。
这是可拖动播放器标记的示例:
<div class="drakt spiller draggable">
<span style="visibility: hidden;">58</span>
<div class="draktnummer">17</div><p>Traoré</p>
</div>
希望你能帮我解决这个问题。
提前致谢。
最佳答案
这样的事情可能会起作用:
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())
}
关于php - jQuery-UI - 从 .droppable 到 p.array 的 .append(快到了!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4434778/