Перетащите дочерний узел

Хорошо, я добавляю это как еще один ответ, потому что поле для комментариев слишком маленькое,

Чтобы скрыть/показать элемент во время перетаскивания, вы можете использовать события запуска и остановки.

В этом примере отображается/скрывается значок +/- (свернуть/развернуть) рядом с текстом узла дерева при перетаскивании, но вы можете легко изменить его, чтобы скрыть/показать флажки, если они есть.

<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());
        }
    });
});

I'll try to have a look at the clone problem.

-- изменить --

Судя по всему, проблема с клонированием есть только в 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).

Ваш javascript в функции drop может выглядеть следующим образом. (все еще нужно сделать некоторую проверку нулевых значений, конечно)

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 с настраиваемым атрибутом, в который вы помещаете свой идентификатор на стороне клиента.

Ваш пользовательский узел дерева может выглядеть так

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 (сначала зарегистрируйте пользовательскую сборку веб-элемента управления)

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

вместо

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

И ваш javascript остается красивым и чистым

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

Если у вас есть следующий 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-обертки.

Может быть, вы могли бы переопределить RenderContents в классе, производном от TreeView, и рекурсивно обрабатывать рендеринг узлов дерева самостоятельно, но звучит как много работы только для того, чтобы обернуть два элемента.

Возможно, лучшим выбором будет использование плагина JQuery для отображения вашего древовидного списка.