BN089-BS开发框架MVC4版/source20131023/Zephyr.Web/Content/js/jquery-easyui-1.3.1/demo/droppable2.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<style type="text/css">
		.drag-item{
			list-style-type:none;
			display:block;
			padding:5px;
			border:1px solid #ccc;
			margin:2px;
			width:300px;
			background:#fafafa;
		}
		.indicator{
			position:absolute;
			font-size:9px;
			width:10px;
			height:10px;
			display:none;
			color:red;
		}
	</style>
	<script>
		$(function(){
			var indicator = $('<div class="indicator">>></div>').appendTo('body');
			$('.drag-item').draggable({
				revert:true,
				deltaX:0,
				deltaY:0
			}).droppable({
				onDragOver:function(e,source){
					indicator.css({
						display:'block',
						top:$(this).offset().top+$(this).outerHeight()-5
					});
				},
				onDragLeave:function(e,source){
					indicator.hide();
				},
				onDrop:function(e,source){
					$(source).insertAfter(this);
					indicator.hide();
				}
			});
		});
	</script>
</head>
<body>
	<h1>DragDrop</h1>
	<ul style="margin:0;padding:0;margin-left:10px;">
		<li class="drag-item">Drag 1</li>
		<li class="drag-item">Drag 2</li>
		<li class="drag-item">Drag 3</li>
		<li class="drag-item">Drag 4</li>
		<li class="drag-item">Drag 5</li>
		<li class="drag-item">Drag 6</li>