jQuery 可拖放与 Firefox 和 IE 的兼容性问题

Question

好吧，请耐心听我说，这是那些很长的文章之一。

我有一个存储 ID 和字段的值表。

<asp:DataGrid runat="server" ID="dgFields" AutoGenerateColumns="false">
   <Columns>
        <asp:BoundColumn DataField="ID" Visible="true" HeaderText="ID"></asp:BoundColumn>
        <asp:BoundColumn ItemStyle-CssClass="draggable" DataField="Name" HeaderText="Field">
         </asp:BoundColumn>
    </Columns>
</asp:DataGrid>

这可以正确绑定并且数据正确地位于表中。请注意，只有字段绑定列是“可拖动的”。另请注意，拖动效果很好。

现在我有一个文本框，我希望能够将值从表中拖放到其中。 漂亮又简单——

<asp:TextBox ID="txtNode" runat="server" class="droppable"></asp:TextBox>

现在是有趣的部分:)

$j(".draggable").draggable({ helper: 'clone', opacity: 0.7, cursor: 'move' });

这很好用。

现在是窍门。记住id和字段。我想拖动字段，但希望将 ID 添加到文本框中。得到这个工作正常。在 IE 中测试。然而今天我在火狐浏览器中打开它，想象一下当“未定义”开始出现在我的文本框中时我的恐惧。

只是为了速度（又名让它现在工作），我改变了我的 droppable，它现在看起来如下：

$j(".droppable").droppable({
                accept: '.draggable',
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function(event, ui) {
                    var tbox = document.getElementById('txtNode');


                    //IE works with the following code
                    var id = ui.draggable[0].previousSibling.innerText;
                    //returns null for FIREFOX
                    if (id == null) {
                        //FIREFOX works with this
                        id = ui.draggable[0].previousElementSibling.innerHTML
                    }

                    tbox.value = tbox.value + '{' + id + '}';

                }
            });

注意。 'tbox.value = ...' 位是因为我想构建一个由拖到文本框的所有 id 组成的字符串。我需要获取同级，因为为了用户体验，我希望他们拖动用户友好的字段名称而不是 id （因为 id 对用户来说没有意义 - 它可见的唯一原因是用户可以映射一旦他拖动它，文本框中的 id 就会变为单词）。只是为了进一步了解背景，id 字符串将被保存到一个 xml 文件中，并用于配置和其他一些神奇的东西:)

所以现在的问题

1. 是这是一个已知的错误还是我在做一些完全错误的事情？
2. 如果这是一个问题，这是最好的方法还是有更好的方法来解决它？

再次请注意 - 这里的所有代码都有效。这是我目前所拥有的最佳方法 - 这无疑是一种解决方法。

Answer 1

这里的问题是 Firefox 和 IE 中的 DOM 实现不兼容。 jQuery 的目标是让开发人员避免做你必须做的事情。尽管我无法测试您的代码（因为我没有填充元素的所有服务器端业务逻辑），但您可能想尝试以下操作。您基本上只需要用 jQuery 的 API 替换 DOM 调用即可。我们开始....

将：替换

var id = ui.draggable[0].previousSibling.innerText;
//returns null for FIREFOX
if (id == null) {
  //FIREFOX works with this
  id = ui.draggable[0].previousElementSibling.innerHTML
}

为：

var id = ui.draggable.prev().html();

有关 jQuery API 的更多信息可以在此处找到： jQuery API。具体来说，prev() 和 html() 调用分别来自 Traversing 和 Attributes。

我希望我能帮忙！

斯蒂芬