可拖动的方法

时间:2010-07-12 10:13:25

标签: javascript jquery jquery-ui

我已经从TreeView拖动了一个节点,并通过将节点的文本警告为alert(ui.draggable.text());来删除它。我将如何获得被拖动节点的值?除了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&amp;t=634115066046333750" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=-_Z2ZXavdO8Ezg-kA84ZvmVgjjSyjH6mPKq7ZZM1cz2uLwlXWnF7MVaFwkbzWADj9wN6LEk5ihQlv_D6OQDj8g2&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>

1 个答案:

答案 0 :(得分:0)

ui.draggable是表示拖动的DOM元素的jquery对象... all the jQuery methods可用于它:)

例如,获取属性:

ui.draggable.attr('data-value')

或者如果它是输入类型元素:

ui.draggable.val()

我不能确切地说不知道你的拖车是什么......但是如果不是可拖动的话,它就像你得到它一样。