Question

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

或至少如何使用jquery获取特定子节点的text / 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库。

如果您打算拖放带有子节点的treenode，您可能会有一些乐趣，因为显然树节点呈现为一个表（对于父节点）和一个带有子节点的div。没有div包装都。

也许你可以覆盖TreeView派生类中的RenderContents并自己递归地处理treenodes的渲染，但听起来像包装两个元素的工作很多。

也许更好的选择是使用JQuery插件来渲染您的树形图。

Answer 2

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

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

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

<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”标签上，还放在周围的“td”标签上。因此，通过使用.treeNode选择器，可拖动的方法执行两次......在FF中不是这种情况。

您可以通过更改“＃＆lt;％= TreeView1.ClientID％＆gt; 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并将每个Treenode包装在一个带有自定义属性的div中来为客户端提供更清洁的客户端。

您的自定义treenode可能如下所示

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"));

拖放子节点

2 个答案: