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

【问题标题】：How do you make a draggable <tr> using YUI3?如何使用 YUI3 制作可拖动的 <tr>？
【发布时间】：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>

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

【问题讨论】：

标签： javascript yui draggable drag

【解决方案1】：

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

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

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

【讨论】：