Glisser et déposer un nœud enfant

Question

J'ai rempli des données dans le contrôle TreeView. Comment puis-je faire glisser un nœud enfant particulier à partir d'un nœud parent et déposer le nœud glissé dans un DIV ou une partie quelconque, en utilisant la commande JQUERY ? Je sais que dans jquery, il existe des méthodes "draggable" et "droppable" pour rendre cela possible. Mais je veux faire glisser un nœud enfant particulier et le déposer.

Ou au moins comment récupérer le texte/id d'un nœud enfant particulier en utilisant jquery ? J'espère que je peux traîner, si je peux récupérer le noeud enfant.

Answer 1

Si vous avez l'aspx suivant

<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>

Ajouter

<script type="text/javascript">
    $(function () {
        $(".treeNode").draggable();
        $("#<%= TreeView1.ClientID%>").droppable({
            drop: function (event, ui) {
                alert(event.originalTarget.text);
            }
        });
    });
</script>

Pour afficher le texte du nœud déposé.

Vous aurez cependant besoin des bibliothèques jquery.ui.

Si vous envisagez de glisser-déposer un treenode avec ses nœuds enfants, vous risquez de vous amuser car, apparemment, un nœud d'arbre est rendu sous la forme d'un tableau (pour le parent) et d'un div avec les enfants. Il n'y a pas de div enveloppant les deux.

Peut-être que vous pourriez surcharger le RenderContents dans une classe dérivée de TreeView et gérer récursivement le rendu des treenodes vous-même mais cela semble être beaucoup de travail juste pour envelopper deux éléments.

Il serait peut-être plus judicieux d'utiliser un plugin JQuery pour afficher la liste des arbres.

Answer 2

Ok, j'ajoute ceci comme une autre réponse parce que la boîte de commentaires est trop petite,

Pour masquer/afficher un élément tout en le faisant glisser, vous pouvez utiliser les événements de début et de fin.

Cet exemple affiche/masque l'icône +/- (réduire/réduire) à côté du texte treenode pendant le glissement, mais vous pouvez facilement le modifier pour masquer/afficher les cases à cocher si elles sont présentes.

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

Je vais essayer d'examiner le problème du clone.

-- editar --

Apparemment, le problème du clone ne se pose que dans IE et est causé par la fonction

 <NodeStyle CssClass="treeNode" />

En collaboration avec

$(".treeNode").draggable(...

Cela place la classe treeNode non seulement sur la balise "a" mais aussi sur la balise "td" qui l'entoure. Ainsi, en utilisant le sélecteur .treeNode, la méthode draggable est exécutée deux fois... Ce n'est pas le cas dans FF.

Vous pouvez résoudre ce problème en changeant simplement le sélecteur dans "#<%= TreeView1.ClientID%> a.treeNode". Ainsi, avec l'aspx mentionné ci-dessus, vous obtiendriez le script suivant.

    $(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>

-- editar --

En réponse à votre commentaire :

Pour obtenir la valeur du nœud glissé, vous pouvez utiliser la manipulation de chaînes en javascript pour la filtrer de l'attribut href (treenode rend la valeur dans l'attr href).

Votre javascript dans la fonction de dépôt pourrait ressembler à ce qui suit. (il faut encore vérifier les valeurs nulles, bien sûr).

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

Ou vous pouvez le rendre un peu plus propre côté client en héritant de Treenode et en enveloppant chaque Treenode par un div avec un attribut personnalisé dans lequel vous mettez votre id côté client.

Votre treenode personnalisé pourrait ressembler à ceci

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

Ensuite, dans votre aspx, utilisez (enregistrez d'abord votre assembly de contrôle web personnalisé)

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

au lieu de

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

Et votre javascript reste beau et propre

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