(jquery.drag) jquery拖动插件?方法

最新推荐文章于 2024-06-05 10:04:13 发布

凉粉zzz

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： jQuery

本文链接：https://blog.csdn.net/sc_jelly/article/details/9117553

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script><style type="text/css"></style>
<script type="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: 0 auto;
	height: auto;
	overflow: hidden;
}

#contentTop {
	width: 600px;
	padding: 10px;
	margin-left: 30px;
}

#contentLeft {
	float: left;
	width: 400px;
}

#contentLeft li {
	list-style: none;
	margin: 0 0 4px 0;
	padding: 10px;
	background-color:#00CCCC;
	border: #CCCCCC solid 1px;
	color:#fff;
}


	

#contentRight {
	float: right;
	width: 260px;
	padding:10px;
	background-color:#336600;
	color:#FFFFFF;
}

</style>


<script type="text/javascript">
$(document).ready(function(){ 
						   
	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {
			var id="";
            $("ul.ui-sortable li").each(function(){
                id+=$(this).attr("id")+"<br/>";
            })
            $("#contentRight").html(id);
		}								  
		});
	});

});	
</script>

</head>
<body style="cursor: auto;">

	<div id="contentWrap">

	
		<div id="contentLeft">
			<ul class="ui-sortable">
                <li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">3. Returned array can be found at the right</li>
                <li id="recordsArray_2">2. Dragging changes the opacity of the item</li>
                <li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">1. Once dropped, an Ajax query is activated</li>
                <li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">4. It is very very easy</li>
                <li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">5. It is very very easy</li>
                <li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">6. It is very very easy</li>
                <li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">7. It is very very easy</li>
			</ul>
		</div>
		
		<div id="contentRight"></div>
	
	</div>



</body></html>

demo地址