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>

这正确绑定，数据正确地位于表中。请注意，只有Field绑定列是“可拖动的”。还要注意拖动效果很好。

现在我有一个文本框，我希望能够将表中的值拖放到。好又简单 -

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

现在有趣的部分：）

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

这很好用。

现在的伎俩。记住身份和领域。我想拖动该字段，但我希望将ID添加到文本框中。得到这个工作正常。在IE中测试。然而今天我在firefox中打开它，并想象当我的文本框中出现“undefined”时我完全恐惧。

为了速度起见（也就是现在让它工作），我改变了我的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字符串将被保存到xml文件，用于配置和其他一些神奇的东西：）

现在问题

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

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

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（）调用分别来自遍历和属性。

我希望我能帮忙！

斯蒂芬

与firefox和ie的jQuery draggable droppable兼容性问题

1 个答案: