<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="treeview.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
$(function () {
$(".treeNode").draggable();
$("#<%= TreeView1.ClientID%>").droppable({
drop: function (event, ui) {
alert(event.originalTarget.text);
}
});
});
</script>--%>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<%-- <script>
$( function() {
$("#TreeView1").draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>--%>
<%-- <script type="text/javascript">
$(function () {
$(".treeNode").draggable();
$("#<%= TreeView1.ClientID%>").droppable({
drop: function (event, ui) {
alert(event.originalTarget.text);
}
});
});
</script>--%>
<!------ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ------------------->
<script type="text/javascript">
$(function () {
$(".draggable").draggable({
revert: true,
helper: 'clone',
start: function (event, ui) {
$(this).fadeTo('fast', 0.5);
},
stop: function (event, ui) {
$(this).fadeTo(0, 1);
}
});
$(".treeNode").draggable();
$("#TextBox1").droppable({
hoverClass: 'active',
drop: function (event, ui) {
this.value = $(ui.draggable).text();
}
});
});
</script>
<!------ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ------------------->
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView class="draggable" ID="TreeView1" runat="server" SelectAction="True" ImageSet="XPFileExplorer" NodeIndent="15">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<%--<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px"></NodeStyle>--%>
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
<NodeStyle CssClass="treeNode" />
</asp:TreeView>
<%-- <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>--%>
<br/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>