如何使用 YUI3 制作可拖动的 <tr>？

Posted 2023-05-08

【中文标题】如何使用 YUI3 制作可拖动的 <tr>？

【英文标题】：How do you make a draggable <tr> using YUI3?

【发布时间】：2010-12-19 10:15:15

【问题描述】：

我正在使用 YUI3，我一直在尝试在表格中制作<tr> 标签，但没有运气。我发现我可以拖动<div> 节点，但由于某种原因我不能拖动<tr>。这不应该是一个限制，我找到了 YUI2 的示例，但代码与 YUI3 完全不同，我无法弄清楚。

有谁知道在 YUI3 中是否可以拖动<tr> 节点，以及如何做到这一点？

这是我的代码：

YUI(combine: true, timeout: 10000).use("dd-drop", "dd-constrain", "node", function (Y) 
    var drags = Y.Node.all('#draftable-players tr.drag');
    drags.each(function(v, k) 
        var dd = new Y.DD.Drag(
            node: v,
            dragMode: 'intersect'
        ).plug(Y.Plugin.DDConstrained, 
            constrain2node: '#draft'
       );
       dd.on('drag:end', function(e) 
           e.preventDefault();
       );
    );
);

以及相关的html：

<div id="draft">

<table id="draftable-players">
<tr class="drag"><td>some stuff</td></tr>
<tr class="drag"><td>some more stuff</td></tr>
</table>

<table> another table, i'm trying to drag <tr>s from the other one to this one
</table>

</div>

任何帮助将不胜感激。谢谢！

【参考方案1】：

这个问题并没有引起太大的兴趣，但我想我会回答这个问题，以防将来有人遇到这个问题。

我发现你不能在两个表之间拖动 <tr> 元素，只能在同一个表内 - 进一步检查我上面提到的 YUI2 示例正是这样做的，在给定表内拖动。

我已经将我的表格转换为<div> 元素并使用CSS 将它们设置为看起来像<table>，现在我可以从一个“表格”拖动到另一个。如果有人想看一些拖放代码，请查看 YUI3 的文档here。