I have dragged a node from TreeView and dropped it by alerting the Text of the node as alert(ui.draggable.text()); How will I get the Value of the dragged node ? What all methods are there for draggable other than text() ?
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/ui.core.min.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script src="Scripts/ui.droppable.js" type="text/javascript"></script>
<style type="text/css">
.dragcss { width: 75px; height: 25px; background: silver; padding: 10px; }
.dropcss { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
.dropcss1 { width: 325px; height: 205px; background: beige; color: black; }
.treeNode { color:blue; font:14px Arial, Sans-Serif; }
.rootNode { font-size:18px; width:100%; border-bottom:Solid 1px black; }
.leafNode { border:Dotted 2px black; padding:4px; background-color:#eeeeee; font-weight:bold; }
</style>
<style type="text/css">
.ctl00_SampleMasterContentPlaceHolder_TreeView1_0 { text-decoration:none; }
.ctl00_SampleMasterContentPlaceHolder_TreeView1_1 { border-style:none; }
.ctl00_SampleMasterContentPlaceHolder_TreeView1_2 { }
</style></head>
<body>
<form name="aspnetForm" method="post" action="DragDropTreeView1.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_SampleMasterContentPlaceHolder_TreeView1_ExpandState" id="ctl00_SampleMasterContentPlaceHolder_TreeView1_ExpandState" value="eennnennn" />
<input type="hidden" name="ctl00_SampleMasterContentPlaceHolder_TreeView1_SelectedNode" id="ctl00_SampleMasterContentPlaceHolder_TreeView1_SelectedNode" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="ctl00_SampleMasterContentPlaceHolder_TreeView1_PopulateLog" id="ctl00_SampleMasterContentPlaceHolder_TreeView1_PopulateLog" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMDg4MDIyNDYPZBYCZg9kFgICAw9kFgICAw9kFgJmD2QWAmYPZBYCAgEPPCsACQIADxYGHg1OZXZlckV4cGFuZGVkZB4MU2VsZWN0ZWROb2RlZB4JTGFzdEluZGV4AglkCBQrAAJkFCsAAhYCHghFeHBhbmRlZGcUKwADZBQrAAIWAh8DZxQrAARkFCsAAhYCHwNnZBQrAAIWAh8DZ2QUKwACFgIfA2dkFCsAAhYCHwNnFCsABGQUKwACFgIfA2dkFCsAAhYCHwNnZBQrAAIWAh8DZ2RkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBS5jdGwwMCRTYW1wbGVNYXN0ZXJDb250ZW50UGxhY2VIb2xkZXIkVHJlZVZpZXcxkLfNjG/12TUIpgO1ZyU1Ry9g7Dg=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=nf5uDZf9LhRa-ij6_ln32g2&t=634115066046333750" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=-_Z2ZXavdO8Ezg-kA84ZvmVgjjSyjH6mPKq7ZZM1cz2uLwlXWnF7MVaFwkbzWADj9wN6LEk5ihQlv_D6OQDj8g2&t=fffffffff2a422d9" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function TreeView_PopulateNodeDoCallBack(context,param) {
WebForm_DoCallback(context.data.treeViewID,param,TreeView_ProcessNodeData,context,TreeView_ProcessNodeData,false);
}
var ctl00_SampleMasterContentPlaceHolder_TreeView1_Data = null;//]]>
</script>
<script src="/ScriptResource.axd?d=jkNSjYNc7Ub-HtvpZnNG7VeJ9LnQr6hZziD0_aghfOMBGWOZKfV7wYRMwK6o5lKehE2Y_ZQTdK10_EV6DTo4--h_EUfAyv59eyc6aGvwRSc1&t=254510a4" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=jkNSjYNc7Ub-HtvpZnNG7VeJ9LnQr6hZziD0_aghfOMBGWOZKfV7wYRMwK6o5lKelL3Mb7rpaOxs3dWQVgyhR6580N9mVlhyBdmh95dXpL8_nElyKM90269LCazuYNqr0&t=254510a4" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCgKjp6i9CwKUteWiCwLPxJrcCwLUz4yaBAKsk4WVBAKhpf64AgLPxNbtAQLN+pTEAwKsk+HaCQKupb6kAXaDkRVw5gFckQsP1zMUeyTYU1b7" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$sc', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl00$SampleMasterContentPlaceHolder$upnlFirst'], [], [], 90);
//]]>
</script>
<div>
<script language="javascript" type="text/javascript">
$(function() {
$("#ctl00_SampleMasterContentPlaceHolder_TreeView1 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'
});
$(".droppable").droppable({
drop: function(event, ui) {
alert(ui.draggable.text());
alert(ui.draggable.attr("Value"));
}
});
});
</script>
<div id="ctl00_SampleMasterContentPlaceHolder_upnlFirst">
<table id="tblMain" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:50%">
<a href="#ctl00_SampleMasterContentPlaceHolder_TreeView1_SkipLink"><img alt="Skip Navigation Links." src="/WebResource.axd?d=_aOWHcaWhikpJlYso1Bk8A2&t=634115066046333750" width="0" height="0" style="border-width:0px;" /></a><div id="ctl00_SampleMasterContentPlaceHolder_TreeView1">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><a id="ctl00_SampleMasterContentPlaceHolder_TreeView1n0" href="javascript:TreeView_ToggleNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data,0,ctl00_SampleMasterContentPlaceHolder_TreeView1n0,' ',ctl00_SampleMasterContentPlaceHolder_TreeView1n0Nodes)"><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97W_JvLDnMdpzyC2xLju6gYY1&t=634115066046333750" alt="Collapse Employees" style="border-width:0;" /></a></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t0');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t0" style="border-style:none;font-size:1em;">Employees</a></td>
</tr>
</table><div id="ctl00_SampleMasterContentPlaceHolder_TreeView1n0Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><a id="ctl00_SampleMasterContentPlaceHolder_TreeView1n1" href="javascript:TreeView_ToggleNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data,1,ctl00_SampleMasterContentPlaceHolder_TreeView1n1,' ',ctl00_SampleMasterContentPlaceHolder_TreeView1n1Nodes)"><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97W_JvLDnMdpzyC2xLju6gYY1&t=634115066046333750" alt="Collapse HR" style="border-width:0;" /></a></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass1')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t1');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t1" style="border-style:none;font-size:1em;">HR</a></td>
</tr>
</table><div id="ctl00_SampleMasterContentPlaceHolder_TreeView1n1Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass1\\ID-1234')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t2');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t2" style="border-style:none;font-size:1em;">Bradley</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass1\\ID-5678')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t3');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t3" style="border-style:none;font-size:1em;">Whitney</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass1\\ID-9101')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t4');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t4" style="border-style:none;font-size:1em;">Barbara</a></td>
</tr>
</table>
</div><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><a id="ctl00_SampleMasterContentPlaceHolder_TreeView1n5" href="javascript:TreeView_ToggleNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data,5,ctl00_SampleMasterContentPlaceHolder_TreeView1n5,' ',ctl00_SampleMasterContentPlaceHolder_TreeView1n5Nodes)"><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97W_JvLDnMdpzyC2xLju6gYY1&t=634115066046333750" alt="Collapse IT" style="border-width:0;" /></a></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass2')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t5');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t5" style="border-style:none;font-size:1em;">IT</a></td>
</tr>
</table><div id="ctl00_SampleMasterContentPlaceHolder_TreeView1n5Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass2\\ID-5587')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t6');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t6" style="border-style:none;font-size:1em;">Jimmy</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass2\\ID-5474')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t7');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t7" style="border-style:none;font-size:1em;">Samantha</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750" alt="" /></td><td class="treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_2" style="white-space:nowrap;"><a class="ctl00_SampleMasterContentPlaceHolder_TreeView1_0 treeNode ctl00_SampleMasterContentPlaceHolder_TreeView1_1" href="javascript:__doPostBack('ctl00$SampleMasterContentPlaceHolder$TreeView1','sEmployees\\SubClass2\\ID-2001')" onclick="TreeView_SelectNode(ctl00_SampleMasterContentPlaceHolder_TreeView1_Data, this,'ctl00_SampleMasterContentPlaceHolder_TreeView1t8');" id="ctl00_SampleMasterContentPlaceHolder_TreeView1t8" style="border-style:none;font-size:1em;">Freddy</a></td>
</tr>
</table>
</div>
</div>
</div><a id="ctl00_SampleMasterContentPlaceHolder_TreeView1_SkipLink"></a>
</td>
<td style="width:50%" valign="top">
<div id="content" class='droppable' style='height: 200px;width:200px;background-color:Aqua;'>
</div>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var ctl00_SampleMasterContentPlaceHolder_TreeView1_ImageArray = new Array('', '', '', '/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97UsXKuAflR8TNlHOiqqEj1w1&t=634115066046333750', '/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97flu4JJFpcZbBEsvyw9YUW81&t=634115066046333750', '/WebResource.axd?d=3_lvwIPQNzTdTcWf7tk97W_JvLDnMdpzyC2xLju6gYY1&t=634115066046333750');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
WebForm_InitCallback();var ctl00_SampleMasterContentPlaceHolder_TreeView1_Data = new Object();
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.images = ctl00_SampleMasterContentPlaceHolder_TreeView1_ImageArray;
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.collapseToolTip = "Collapse {0}";
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.expandToolTip = "Expand {0}";
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.expandState = theForm.elements['ctl00_SampleMasterContentPlaceHolder_TreeView1_ExpandState'];
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.selectedNodeID = theForm.elements['ctl00_SampleMasterContentPlaceHolder_TreeView1_SelectedNode'];
for (var i=0;i<6;i++) {
var preLoad = new Image();
if (ctl00_SampleMasterContentPlaceHolder_TreeView1_ImageArray[i].length > 0)
preLoad.src = ctl00_SampleMasterContentPlaceHolder_TreeView1_ImageArray[i];
}
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.lastIndex = 9;
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.populateLog = theForm.elements['ctl00_SampleMasterContentPlaceHolder_TreeView1_PopulateLog'];
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.treeViewID = 'ctl00$SampleMasterContentPlaceHolder$TreeView1';
ctl00_SampleMasterContentPlaceHolder_TreeView1_Data.name = 'ctl00_SampleMasterContentPlaceHolder_TreeView1_Data';
Sys.WebForms.PageRequestManager.getInstance()._registerDisposeScript("ctl00_SampleMasterContentPlaceHolder_upnlFirst", "ctl00_SampleMasterContentPlaceHolder_TreeView1_ImageArray.length = 0;\r\nctl00_SampleMasterContentPlaceHolder_TreeView1_Data = null;");
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>
ui.draggableis the jquery object representing the dragged DOM element…all the jQuery methods are available on it 🙂For example to get an attribute:
or if it’s an input type element:
I can’t say exactly without knowing what your draggable is…but it’s the same way you’d get it if it weren’t a draggable.