提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery拖动插件(jquery.drag)使用介绍

jQuery插件 使用 介绍 拖动 drag
2023-06-13 09:15:01 时间
复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>jQueryDynamicDrag"nDrop</title>
<scripttype="text/javascript"src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><styletype="text/css"></style>
<scripttype="text/javascript"src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script>
<style>
body{
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
margin-top:10px;
}
ul{
margin:0;
}
#contentWrap{
width:700px;
margin:0auto;
height:auto;
overflow:hidden;
}
#contentTop{
width:600px;
padding:10px;
margin-left:30px;
}
#contentLeft{
float:left;
width:400px;
}
#contentLeftli{
list-style:none;
margin:004px0;
padding:10px;
background-color:#00CCCC;
border:#CCCCCCsolid1px;
color:#fff;
}

#contentRight{
float:right;
width:260px;
padding:10px;
background-color:#336600;
color:#FFFFFF;
}
</style>
<scripttype="text/javascript">
$(document).ready(function(){

$(function(){
$("#contentLeftul").sortable({opacity:0.5,cursor:"move",update:function(){
varid="";
$("ul.ui-sortableli").each(function(){
id+=$(this).attr("id")+"<br/>";
})
$("#contentRight").html(id);
}
});
});
});
</script>
</head>
<bodystyle="cursor:auto;">
<divid="contentWrap">

<divid="contentLeft">
<ulclass="ui-sortable">
<liid="recordsArray_3"style="opacity:1;z-index:0;"class="">3.Returnedarraycanbefoundattheright</li>
<liid="recordsArray_2">2.Draggingchangestheopacityoftheitem</li>
<liid="recordsArray_1"style="opacity:1;z-index:0;"class="">1.Oncedropped,anAjaxqueryisactivated</li>
<liid="recordsArray_4"style="opacity:1;z-index:0;"class="">4.Itisveryveryeasy</li>
<liid="recordsArray_5"style="opacity:1;z-index:0;"class="">5.Itisveryveryeasy</li>
<liid="recordsArray_6"style="opacity:1;z-index:0;"class="">6.Itisveryveryeasy</li>
<liid="recordsArray_7"style="opacity:1;z-index:0;"class="">7.Itisveryveryeasy</li>
</ul>
</div>
<divid="contentRight"></div>
</div>
</body></html>

demo地址

相关文章