2

好吧，忍受我，这是那些长的之一。

我有一个存储 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 文件并用于配置和其他一些神奇的东西:)

所以现在的问题

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

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

4

1 回答 1

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。

我希望我能帮上忙！

斯蒂芬

于 2009-11-25T17:07:50.667 回答