jQuery 可拖动 droppable 与 firefox 和 ie 的兼容性问题答案

【问题标题】：jQuery draggable droppable compatibility issue with firefox and iejQuery 可拖动 droppable 与 firefox 和 ie 的兼容性问题
【发布时间】：2009-11-25 12:38:41
【问题描述】：

好的，请耐心等待，这是其中一个较长的。

我有一个存储 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 中测试。但是今天我在 Firefox 中打开它，想象一下当“未定义”开始出现在我的文本框中时我的完全恐惧。

只是为了速度（也就是让它现在工作），我改变了我的 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 文件中，并用于配置和其他一些神奇的东西:)

现在是问题

这是一个已知的错误还是我做错了什么？
如果这是一个问题，这是最好的方法还是有更好的方法来解决它？

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

【问题讨论】：

标签： jquery cross-browser draggable droppable

【解决方案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。

希望能帮上忙！

斯蒂芬

【讨论】：