자식 노드 끌어서 놓기

Question

TreeView 컨트롤에 채워진 데이터가 있습니다. 부모 노드의 특정 자식 노드를 드래그하여 DIV 또는 다른 부분으로 드래그하는 방법은 JQUERY? 나는 jquery에서 이것을 가능하게하는 "draggable"및 "droppable"메서드가 있음을 알고 있습니다. 하지만 특정 하위 노드를 드래그하여 놓기를 원합니다.

또는 적어도 jquery를 사용하여 특정 하위 노드의 텍스트/ID를 가져 오는 방법은 무엇입니까? 당신은 다음과 같은 영문이 있다면 내가 자식 노드에게

Answer 1

가 좋아 나는 다른 답변으로 이것을 추가합니다.

이 예제는 드래그하는 동안 트리 노트 텍스트 옆에 +/- (축소/비틀림) 아이콘을 표시/숨기지 만 확인란이있는 경우 숨기거나 표시하도록 쉽게 수정할 수 있습니다.

<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에서만되고

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

과 연계

<NodeStyle CssClass="treeNode" /> 

에 의해 발생하는 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> 

- 편집 - 귀하의 의견에 대한 답변에서

:

당신이 밖으로 필터링하는 자바 스크립트 문자열 조작을 사용할 수 있습니다 드래그 된 노드의 값을 얻으려면 href 속성 (treenode는 href attr의 값을 렌더링합니다).

드롭 기능의 자바 스크립트는 다음과 같이 보일 수 있습니다.

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

을 (여전히 당연히 null 값에 대한 몇 가지 검사를 할 필요) 또는 당신은 TreeNode를 상속하여 조금 청소기 클라이언트 측을 당신이 당신의 클라이언트 측을 넣어하는 사용자 정의 attribut와 사업부에 의해 모든 TreeNode를 포장 할 수 있습니다 신분증.

귀하의 사용자 정의의 TreeNode가

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

대신

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

그리고 당신의 영문 사용 그런 다음이

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

모습 (첫째 당신에게 사용자 정의 웹 제어 어셈블리를 등록) 할 수 귀하 좋은 상태로 유지되는 자바 스크립트

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

Answer 2

를 가져올 수 있는지

<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를 재정의하고 반복적으로 treenodes의 렌더링을 처리 할 수 ​​있지만 두 요소를 감싸는 많은 작업처럼 들릴 수 있습니다.

더 나은 선택은 당신의 treelist를 렌더링하기 위해 JQuery 플러그인을 사용하는 것입니다. 주석 상자는 작은으로,

이/숨기기 당신이 시작을 사용하여 이벤트를 중지 할 수 있습니다 드래그 항목을 표시하려면 때문에