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

Question

Я заполнил данные в элементе управления TreeView.Как я буду перетаскивать определенный дочерний узел из родительского узла и перетаскивать перетаскиваемый узел в DIV или любую часть, используя JQUERY ?Я знаю, что в jquery есть методы «перетаскиваемый» и «сбрасываемый», чтобы сделать это возможным.Но я хочу перетащить определенный дочерний узел и отбросить его.

Или хотя бы Как получить текст / идентификатор конкретного дочернего узла с помощью jquery?Я надеюсь, что смогу перетащить, если смогу достать дочерний узел

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 с дочерними элементами. и то и другое.

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

Возможно, лучшим вариантом было бы использовать плагин 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());
        }
    });
});

Iпопробую взглянуть на проблему клонирования.

- edit -

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

- edit -

Inответ на ваш комментарий:

Чтобы получить значение перетаскиваемого узла, вы можете использовать манипуляции со строками 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"));