拖放子节点

Question

我已在 TreeView 控件中填充了数据。如何使用 JQUERY 从父节点拖动特定子节点并将拖动的子节点拖放到 DIV 或任何部分？我知道在 jquery 中，有“draggable”和“droppable”方法可以实现这一点。但我想拖动一个特定的子节点并将其放下。

或者至少如何使用 jquery 获取特定子节点的文本/id？我希望我可以拖动，如果我可以获取子节点

Answer 1

如果您有以下 aspx

<asp:TreeView ID="TreeView1" runat="server">
    <Nodes>
        <asp:TreeNode Text="Employees">
            <asp:TreeNode Text="HR" Value="SubClass1">
                <asp:TreeNode Text="Bradley" Value="ID-1234" />
                <asp:TreeNode Text="Whitney" Value="ID-5678" />
                <asp:TreeNode Text="Barbara" Value="ID-9101" />
            </asp:TreeNode>
            <asp:TreeNode Text="IT" Value="SubClass2">
                <asp:TreeNode Text="Jimmy" Value="ID-5587" />
                <asp:TreeNode Text="Samantha" Value="ID-5474" />
                <asp:TreeNode Text="Freddy" Value="ID-2001" />
            </asp:TreeNode>
        </asp:TreeNode>
    </Nodes>
    <NodeStyle CssClass="treeNode" />
</asp:TreeView>

添加

<script type="text/javascript">
    $(function () {
        $(".treeNode").draggable();
        $("#<%= TreeView1.ClientID%>").droppable({
            drop: function (event, ui) {
                alert(event.originalTarget.text);
            }
        });
    });
</script>

以显示删除的节点的文本。

不过，您将需要 jquery.ui 库。

如果您计划拖放一个树节点及其子节点，您可能会从中获得一些乐趣，因为显然树节点被渲染为一个表（对于父节点）和一个包含子节点的 div。没有 div 包装两者。

也许您可以重写 TreeView 派生类中的 RenderContents 并自己递归地处理树节点的渲染，但这听起来只是包装两个元素需要大量工作。

也许更好的选择是使用 JQuery 插件来呈现树列表。

Answer 2

好的，我将其添加为另一个答案，因为评论框太小，

要在拖动时隐藏/显示项目，可以使用开始和停止事件。

此示例在拖动时显示/隐藏树节点文本旁边的 +/-（折叠/取消折叠）图标，但您可以轻松修改它以隐藏/显示复选框（如果存在）。

<script type="text/javascript">
$(function () {
    $(".treeNode").draggable({
            start: function (event, ui) {

                var previousTd = $(this).parent().prev() ;
                $("img", previousTd).css("visibility", "hidden");
            },
            stop: function (event, ui) {
                var previousTd = $(this).parent().prev();
                $("img", previousTd).css("visibility", "visible");
            });
    $("#<%= TreeView1.ClientID%>").droppable({
        drop: function (event, ui) {
            alert(ui.draggable.text());
        }
    });
});

我会尝试看看克隆问题。

-- 编辑 --

显然，克隆问题仅出现在 IE 中，并且是由 与

 <NodeStyle CssClass="treeNode" />

结合

$(".treeNode").draggable(...

引起的。 这使得 treeNode 类不仅位于“a”标签上，而且还位于“a”标签上在周围的“td”标签上。因此，通过使用 .treeNode 选择器，draggable 方法会执行两次...... FF 中的情况并非如此。

您可以通过更改“#<%= TreeView1.ClientID%> a.treeNode”中的选择器来解决此问题
因此，使用前面提到的 aspx，您将得到以下脚本。

    $(function () {
        $("#<%= TreeView1.ClientID%> a.treeNode").draggable({
            appendTo: 'body',
            helper: 'clone',
            start: function (event, ui) {

                var previousTd = $(this).parent().prev();
                $("img", previousTd).css("visibility", "hidden");
            },
            stop: function (event, ui) {
                var previousTd = $(this).parent().prev();
                $("img", previousTd).css("visibility", "visible");
            },
            zIndex: '100'
        });

        $("#<%= TreeView1.ClientID%>").droppable({
            drop: function (event, ui) {
                alert(ui.draggable.text());
            }
        });
    });
</script>

-- 编辑 --

回答您的评论：

要获取拖动节点的值，您可以使用 javascript 字符串操作将其从 href 属性中过滤出来（treenode 呈现href 属性中的值）。

drop 函数中的 javascript 可能如下所示。 （当然仍然需要对空值进行一些检查）

var hrefParts = $(ui.draggable.context.href.split("\\"));
var nodeValue = hrefParts[hrefParts.length - 1];
nodeValue = nodeValue.substring(0, nodeValue.length - 2);
alert(nodeValue);                    

或者您可以通过继承 Treenode 并通过带有自定义属性的 div 包装每个 Treenode 来使其在客户端更干净一些，您可以在其中放置客户端 id。

你的自定义树节点可能看起来像这样

public class WrappedTreeNode : TreeNode
{
    public string ClientValue { get; set; }

    protected override void RenderPreText(HtmlTextWriter writer)
    {
        writer.WriteBeginTag("div");
        //you can simply use the base.Value aswell here if you want them to be the same
        writer.WriteAttribute("id", ClientValue);
        base.RenderPreText(writer);
    }

    protected override void RenderPostText(HtmlTextWriter writer)
    {
        base.RenderPostText(writer);
        writer.WriteEndTag("div");
    }        
}

然后在你的aspx中使用（首先注册你的自定义Web控件程序集）

<ServerControls:WrappedTreeNode Text="Bradley" ClientValue="ID-1221"/>

而不是

<asp:TreeNode Text="Bradley" Value="ID-1221"/>

你的javascript保持干净整洁

alert($(ui.draggable).parent().attr("id"));