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

Posted 2023-02-24

【中文标题】jQuery-UI - .append 从 .droppable 到 p.array （几乎就在那里！）

【英文标题】：jQuery-UI - .append from .droppable into p.array (almost there!)

【发布时间】：2011-05-25 00:02:56

【问题描述】：

该网站正在使用 .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>

希望您能帮我解决这个问题。

提前致谢。

【参考方案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>

...这会在 div 上设置一个属性，该属性可通过 jQuery 的 .data 方法访问。于是上面的函数就变成了：

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

【讨论】：

我昨天才开始尝试 jQuery。您的代码还不能解决问题。是否可以像使用 PHP 的 IF/ELSE 语句一样执行此操作？首先，找到盒子的类，然后将它添加到匹配的.array类中？真的很抱歉，但我没有 jQuery 知识来查找代码中的错误。 :)

【参考方案2】：

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

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

试着改成这样：

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

编辑：我想我知道你现在需要什么了。之前没有读得这么仔细。您需要的是在将可拖动到的 s 中的文本放到第二个块中相应的 div 中后，将它们附加到第一个代码块中的段落，对吧？

如果是这样，您可以将自己的属性添加到可拖动对象中，例如“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() + ',');

【讨论】：

谢谢你的回答，好时。我发现我可以跳过代码的整个“$(this).find”。第一篇文章已更新。

其实我更喜欢 sje397 的解决方案。使用数据函数更干净。

非常感谢您的回答。我的逻辑是这行不通。可拖动对象可以添加到任何字段。也许这个逻辑可以在droppables中使用？ sje397 正在做类似的事情。 - 我认为这更有可能奏效。我肯定会玩弄你的代码，看看这是否是我正在寻找的。您可以在我的第一篇文章中看到所有可拖动对象的标记。球衣号码和球员 ID 从查询中得到回显。