拖放子节点

Question

我在TreeView控件中填充了数据。我将如何从父节点中拖动某个特定的子节点并将其拖放到DIV或任何部分，使用JQUERY？我知道在jQuery中，有“可拖动”和“可拖拽”的方法，使这成为可能。但我想拖动一个特定的子节点并放下它。

或atleast如何使用jQuery获取特定子节点的文本/ ID？我希望我可以拖动，如果如果你有以下ASPX我可以获取子节点

Answer 1

好，我将其添加为另一种答案，因为评论框是小，

要隐藏/显示项目的同时拖动可以使用的启动和停止的事件。

本示例在拖动时显示/隐藏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中不是这种情况。

只需更改“＃<％= 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 attr中的值）。

您在放置函数中的JavaScript可能如下所示。 （仍然需要做一些检查为空值ofcourse）

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

或者你也可以通过继承树节点使其干净了一点客户方和一个div中，你把你的客户方定制attribut包裹每树节点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")); 

Answer 2

<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插件来渲染你的treelist。