Glisser et déposer un nœud enfant

Question

J'ai rempli des données dans le contrôle TreeView. Comment vais-je faire glisser un noeud enfant particulier à partir d'un noeud parent et déposer le glisser vers un DIV ou une partie, en utilisant JQUERY? Je sais à 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 laisser tomber.

Ou au moins Comment récupérer le texte/identifiant d'un noeud enfant particulier à l'aide de jquery? J'espère que je peux faire glisser, si je peux récupérer le nœud enfant

Answer 1

Ok j'ajouter cela comme une autre réponse, car la boîte de commentaires est petit,

Pour masquer/afficher un élément pendant que vous pouvez utiliser en faisant glisser le démarrage et l'arrêt des événements.

Cet exemple affiche/cache l'icône +/- (réduire/dézoomer) à côté du texte de TODODE tout en le faisant glisser mais vous pouvez facilement le modifier pour masquer/afficher les cases 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 de jeter un oeil sur le problème du clone.

- modifier -

Apparemment, le problème clone est que dans IE et est causée par le

<NodeStyle CssClass="treeNode" /> 

En collaboration avec

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

Cela met la La classe treeNode non seulement sur la balise "a" mais aussi sur la balise "td" environnante. Donc, 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" Donc, avec l'aspx mentionné ci-dessus, vous obtiendrez 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> 

- modifier -

En réponse à votre commentaire:

Pour obtenir la valeur du nœud traîné vous pouvez utiliser javascript manipulation de chaîne pour filtrer hors du Attribut href (treenode rend la valeur dans l'attribut href).

Votre javascript dans la fonction drop pourrait ressembler à ceci. (Encore besoin de faire quelques vérifications pour les valeurs nulles ofcourse)

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 faire un peu clientside nettoyant en héritant treeNode et envelopper chaque treeNode par un div avec un attribut personnalisé dans lequel vous mettez votre clientside id.

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 l'utilisation de ASPX (vous inscrire ensemble de commande Web personnalisée premier)

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

au lieu de

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

Et votre javascript reste agréable et propre

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

Answer 2

Si vous avez la ASPX suivante

<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 abandonné.

Cependant, vous aurez besoin des bibliothèques jquery.ui. Si vous envisagez de faire glisser un tagode avec ses nœuds enfants, vous pourriez vous amuser, car apparemment un nœud d'arbre est rendu en tant que table (pour le parent) et div avec les enfants. Il n'y a pas div enveloppant les deux. Peut-être que vous pourriez surcharger les RenderContents dans une classe dérivée TreeView et gérer récursivement le rendu des treenodes vous-même, mais cela semble beaucoup de travail juste pour envelopper deux éléments.

Peut-être un meilleur choix serait d'utiliser un plugin JQuery pour rendre votre liste de treillis.