我在 TreeView 控件中填充了数据。如何使用 JQUERY 从父节点拖动特定子节点并将拖动的子节点拖放到 DIV 或任何部分？我知道在 jquery 中，有“可拖动”和“可放置”的方法使这成为可能。但我想拖动一个特定的子节点并放下它。
或至少如何使用 jquery 获取特定子节点的文本/ID？我希望我可以拖动，如果我可以获取子节点
【问题讨论】：
标签： c# asp.net jquery jquery-ui jquery-selectors
如果你有以下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 插件来呈现您的树列表。
【讨论】：
好的，我将其添加为另一个答案，因为评论框太小，
要在拖动时隐藏/显示项目，您可以使用开始和停止事件。
此示例在拖动时显示/隐藏树节点文本旁边的 +/-（折叠/展开）图标，但您可以轻松修改它以隐藏/显示复选框（如果存在）。
<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 选择器，draggable 方法被执行了两次……这在 FF 中不是这样的。
您只需更改“# 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 中的值）。
您在 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"));
【讨论】：