kingwrcy · September 19, 2014 02:18
diff --git a/HTML5 Drag And Drop b/HTML5 Drag And Drop
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>HTML5 Drag And Drop</title>
 	<style>#wrap{
 		width:700px;
 		margin:0 auto;
 	}

 	.top{
 		/*border:1px dashed red;*/
 		height:50px;
 		width:100%;
 		margin-bottom: 20px;
 	}

 	.center{
 		border:1px dashed blue;
 		width:100%;
 		min-height:300px;
 		margin-bottom: 20px;
 	}

 	ul{
 		padding:0;
 		margin:0;
 	}

 	.draggable{
 		width:60px;
 		float: left;
 		list-style: none;
 		text-align: center;
 		background-color: #eee;
 		cursor:move;
 		margin-right: 5px;
 		padding:10px;
 		border:1px solid green;
 	}

 	.item{
 		display: list-item;
 		list-style: none;
 		border:1px solid green;
 		width:100%;
 		min-height:50px;
 		line-height: 50px;
 		margin-top:5px;
 		cursor:move;
 		text-align: center;
 		background-color: #eee;
 	}

 	.selected{
 		/*opacity: 0.4;*/
 	}

 	.container{
 		background-color:#D3D3D3;
 		padding:10px;
 		width:97%;
 		min-height:80px;
 	}

 	.dragging{
 		border:1px dashed black;
 	}

 	.diy-marker{
 		font-size:0;
 		height:10px;
 		overflow:visible;
 		position:relative;
 		pointer-events:none;
 		background-image:-webkit-linear-gradient(left,#55B9FF,#55B9FF);
 		background-image:linear-gradient(to left,#55B9FF,#55B9FF);
 		background-repeat:no-repeat;
 		background-position:center;
 		background-size:100% 2px;
 		-mox-box-sizing:border-box;
 		box-sizing:border-box
 	}
 	.diy-marker:only-child{height:50px}.diy-marker:before,.diy-marker:after{
 		content:'';
 		position:absolute;
 		height:10px;
 		width:2px;
 		top:50%;
 		margin-top:-5px;
 		font-size:0;
 		display:block;
 		background-color:#55B9FF
 	}
 	.diy-marker:before{
 		left:0
 	}
 	.diy-marker:after{
 		right:0
 	}

 	.side{
 		width:340px;
 		float:left;
 		min-height: 125px;
 	}

 	.side li{
 		list-style: none;
 		height: 20px;
 		margin-bottom: 5px;
 		text-align: center;
 		line-height: 20px;
 		cursor:move;
 		background-color:#e0c7fc;
 	}

 	#left{
 		margin-right: 20px;
 	}
 </style>
 	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
 	<script>
 		jQuery(document).ready(function($) {
 			$(".draggable").attr('draggable',true);

 			var top = $("#top"),center = $("#center");
 			var dragTarget,_slient = false,append = false,index = 0;
 			var diymarker = $("<div class='diy-marker'/>");

 			function dragstart(e){
 				e.dataTransfer.effectAllowed = "move";
 				e.dataTransfer.setData("text",e.target.id);
 				$(this).addClass('dragging');
 				dragTarget = $(this);
 				//console.log(dragTarget);
 				e.stopPropagation();
 			}

 			function dragover(e){
 				e.dataTransfer.dropEffect = 'move';
 				e.preventDefault(); 
 			}

 			function dragend(e){
 				$(this).removeClass('dragging');
 				e.preventDefault();
 			}

 			function dragenter(e){
 				$(this).addClass('dragging');
 				e.preventDefault();
 			}


 			function dragover2(e){
 				// //console.log(center);
 				e.preventDefault(); 
 				var target = $(e.target).closest(".item");
 				var type = target.attr('type') || 'control';

 				if(center.children().length === 0){
 					center.append(diymarker);
 				}else{
 					if(!target || _slient || dragTarget[0] == target[0] || $.contains(dragTarget[0],target[0]))return;
 					var pos = target.offset();
 					if(!pos)return;
 					$(".selected").removeClass('selected');
 					target.addClass('selected');
 					if(type == 'control'){
 						var after = (e.clientY - pos.top) / target.height() > .5; 
 						if(after){
 							// console.log('control after',e.target);
 							target.after(diymarker);
 						}else{
 							// console.log('control before',e.target);
 							target.before(diymarker);
 						}
 					}else{
 						if(e.clientY > pos.top + target.height()){
 							// console.log('container after',e.target);
 							target.after(diymarker);
 						}else if(e.clientY - 5 < pos.top){
 							// console.log('container before',e.target);
 							target.before(diymarker);
 						}else{
 							if(target.children().length === 0){
 								// console.log(target.children());
 								// console.log('container append',target[0] ,dragTarget[0]);
 								target.append(diymarker);
 							}
 						}
 					}

 					_slient = true;
 					setTimeout(function(){_slient = false;}, 30);
 				}
 				
 			}

 			function dragdrop(e){
 				var item = dragTarget.is(".item") ? dragTarget : $("<div class='item' draggable='true' style='background-color:"+dragTarget.css('backgroundColor')+";'/>");
 				var type = dragTarget.attr('type') || 'control';
 				//console.log(diymarker);
 				if(diymarker.is(':visible')){
 					// console.log(dragTarget.children().length);
 					diymarker.replaceWith(item);
 					if(type == 'container'){
 						item.attr('type',type);
 						item.addClass(type);
 					}
 					$(this).removeClass('dragging');
 					item[0].addEventListener('dragstart',dragstart,false);
 					item[0].addEventListener('dragover',dragover,false);
 					item[0].addEventListener('dragend',dragend,false);
 					$(".selected").removeClass('selected');
 				}
 				
 				e.preventDefault();
 				return false;
 			}

 			$(".draggable").each(function(){
 				this.addEventListener('dragstart',dragstart,false);
 				this.addEventListener('dragover',dragover,false);
 				this.addEventListener('dragend',dragend,false);
 			});

 			center[0].addEventListener('dragenter',dragenter,false);
 			center[0].addEventListener('dragover',dragover2,false);
 			center[0].addEventListener('drop',dragdrop,false);



 			~function(){
 				$("#left li,#right li").prop('draggable',true);
 				var dragTarget = null,_slient = false;
 				function dragstart(e){
 					e.dataTransfer.effectAllowed = "move";
 					e.dataTransfer.setData("text",e.target.id);
 					$(this).addClass('dragging');
 					dragTarget = $(this);
 					e.stopPropagation();
 				}
 				function dragover(e){
 					e.dataTransfer.dropEffect = 'move';
 					e.preventDefault(); 
 					var target = $(e.target).closest("li");
 					var pos = target.offset();
 					if(_slient || !pos || target[0] === dragTarget[0])return;
 					if((e.clientY - pos.top) / target.height() >.5){
 						// console.log('after',dragTarget,target);
 						target.after(dragTarget);
 					}else{
 						// console.log('before',dragTarget,target);
 						target.before(dragTarget);
 					}
 					_slient=true;
 					window.setTimeout(function(){_slient=false;},30);
 					e.preventDefault();
 				}
 				function dragend(e){
 					e.preventDefault(); 
 				}
 				function drop(e){
 					dragTarget.removeClass('dragging');
 				}
 				$("#left li,#right li").each(function(){
 					this.addEventListener('dragstart',dragstart,false);
 					this.addEventListener('dragend',dragend,false);
 				});

 				$("#left,#right").each(function(){
 					this.addEventListener('drop',drop,false);
 					this.addEventListener('dragover',dragover,false);
 				});

 			}();
 		});
 	</script>
 </head>
 <body>
 	<div id="wrap">
 		<div class="top" >
 			<ul id='top'>
 				<li class="draggable" style="background-color:#e0c7fc;">a</li>
 				<li class="draggable" style="background-color:#86ed31;">b</li>
 				<li class="draggable" style="background-color:#924bc1;">c</li>
 				<li class="draggable" style="background-color:#fca16c;" type='container'>container</li>
 				<li class="draggable" style="background-color:#ce902d;">e</li>
 				<li class="draggable" style="background-color:#0299e5;">f</li>
 				<li class="draggable" style="background-color:#bc0585;">g</li>
 				<li class="draggable" style="background-color:#f43f42;">h</li>
 			</ul>
 		</div>
 		<div class="center" id='center'> </div>


 		<div id="left" class='side'>
 			<ul>
 				<li>a</li>
 				<li>b</li>
 				<li>c</li>
 				<li>d</li>
 				<li>e</li>
 			</ul>
 		</div>
 		<div id="right" class='side'>
 			<ul>
 				<li>1</li>
 				<li>2</li>
 				<li>3</li>
 				<li>4</li>
 				<li>5</li>
 			</ul>
 		</div>
 	</div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>HTML5 Drag And Drop</title>
	<style>#wrap{
	width:700px;
	margin:0 auto;
	}

	.top{
	/border:1px dashed red;/
	height:50px;
	width:100%;
	margin-bottom: 20px;
	}

	.center{
	border:1px dashed blue;
	width:100%;
	min-height:300px;
	margin-bottom: 20px;
	}

	ul{
	padding:0;
	margin:0;
	}

	.draggable{
	width:60px;
	float: left;
	list-style: none;
	text-align: center;
	background-color: #eee;
	cursor:move;
	margin-right: 5px;
	padding:10px;
	border:1px solid green;
	}

	.item{
	display: list-item;
	list-style: none;
	border:1px solid green;
	width:100%;
	min-height:50px;
	line-height: 50px;
	margin-top:5px;
	cursor:move;
	text-align: center;
	background-color: #eee;
	}

	.selected{
	/opacity: 0.4;/
	}

	.container{
	background-color:#D3D3D3;
	padding:10px;
	width:97%;
	min-height:80px;
	}

	.dragging{
	border:1px dashed black;
	}

	.diy-marker{
	font-size:0;
	height:10px;
	overflow:visible;
	position:relative;
	pointer-events:none;
	background-image:-webkit-linear-gradient(left,#55B9FF,#55B9FF);
	background-image:linear-gradient(to left,#55B9FF,#55B9FF);
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 2px;
	-mox-box-sizing:border-box;
	box-sizing:border-box
	}
	.diy-marker:only-child{height:50px}.diy-marker:before,.diy-marker:after{
	content:'';
	position:absolute;
	height:10px;
	width:2px;
	top:50%;
	margin-top:-5px;
	font-size:0;
	display:block;
	background-color:#55B9FF
	}
	.diy-marker:before{
	left:0
	}
	.diy-marker:after{
	right:0
	}

	.side{
	width:340px;
	float:left;
	min-height: 125px;
	}

	.side li{
	list-style: none;
	height: 20px;
	margin-bottom: 5px;
	text-align: center;
	line-height: 20px;
	cursor:move;
	background-color:#e0c7fc;
	}

	#left{
	margin-right: 20px;
	}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
	$(".draggable").attr('draggable',true);

	var top = $("#top"),center = $("#center");
	var dragTarget,_slient = false,append = false,index = 0;
	var diymarker = $("<div class='diy-marker'/>");

	function dragstart(e){
	e.dataTransfer.effectAllowed = "move";
	e.dataTransfer.setData("text",e.target.id);
	$(this).addClass('dragging');
	dragTarget = $(this);
	//console.log(dragTarget);
	e.stopPropagation();
	}

	function dragover(e){
	e.dataTransfer.dropEffect = 'move';
	e.preventDefault();
	}

	function dragend(e){
	$(this).removeClass('dragging');
	e.preventDefault();
	}

	function dragenter(e){
	$(this).addClass('dragging');
	e.preventDefault();
	}


	function dragover2(e){
	// //console.log(center);
	e.preventDefault();
	var target = $(e.target).closest(".item");
	var type = target.attr('type') \|\| 'control';

	if(center.children().length === 0){
	center.append(diymarker);
	}else{
	if(!target \|\| _slient \|\| dragTarget[0] == target[0] \|\| $.contains(dragTarget[0],target[0]))return;
	var pos = target.offset();
	if(!pos)return;
	$(".selected").removeClass('selected');
	target.addClass('selected');
	if(type == 'control'){
	var after = (e.clientY - pos.top) / target.height() > .5;
	if(after){
	// console.log('control after',e.target);
	target.after(diymarker);
	}else{
	// console.log('control before',e.target);
	target.before(diymarker);
	}
	}else{
	if(e.clientY > pos.top + target.height()){
	// console.log('container after',e.target);
	target.after(diymarker);
	}else if(e.clientY - 5 < pos.top){
	// console.log('container before',e.target);
	target.before(diymarker);
	}else{
	if(target.children().length === 0){
	// console.log(target.children());
	// console.log('container append',target[0] ,dragTarget[0]);
	target.append(diymarker);
	}
	}
	}

	_slient = true;
	setTimeout(function(){_slient = false;}, 30);
	}

	}

	function dragdrop(e){
	var item = dragTarget.is(".item") ? dragTarget : $("<div class='item' draggable='true' style='background-color:"+dragTarget.css('backgroundColor')+";'/>");
	var type = dragTarget.attr('type') \|\| 'control';
	//console.log(diymarker);
	if(diymarker.is(':visible')){
	// console.log(dragTarget.children().length);
	diymarker.replaceWith(item);
	if(type == 'container'){
	item.attr('type',type);
	item.addClass(type);
	}
	$(this).removeClass('dragging');
	item[0].addEventListener('dragstart',dragstart,false);
	item[0].addEventListener('dragover',dragover,false);
	item[0].addEventListener('dragend',dragend,false);
	$(".selected").removeClass('selected');
	}

	e.preventDefault();
	return false;
	}

	$(".draggable").each(function(){
	this.addEventListener('dragstart',dragstart,false);
	this.addEventListener('dragover',dragover,false);
	this.addEventListener('dragend',dragend,false);
	});

	center[0].addEventListener('dragenter',dragenter,false);
	center[0].addEventListener('dragover',dragover2,false);
	center[0].addEventListener('drop',dragdrop,false);



	~function(){
	$("#left li,#right li").prop('draggable',true);
	var dragTarget = null,_slient = false;
	function dragstart(e){
	e.dataTransfer.effectAllowed = "move";
	e.dataTransfer.setData("text",e.target.id);
	$(this).addClass('dragging');
	dragTarget = $(this);
	e.stopPropagation();
	}
	function dragover(e){
	e.dataTransfer.dropEffect = 'move';
	e.preventDefault();
	var target = $(e.target).closest("li");
	var pos = target.offset();
	if(_slient \|\| !pos \|\| target[0] === dragTarget[0])return;
	if((e.clientY - pos.top) / target.height() >.5){
	// console.log('after',dragTarget,target);
	target.after(dragTarget);
	}else{
	// console.log('before',dragTarget,target);
	target.before(dragTarget);
	}
	_slient=true;
	window.setTimeout(function(){_slient=false;},30);
	e.preventDefault();
	}
	function dragend(e){
	e.preventDefault();
	}
	function drop(e){
	dragTarget.removeClass('dragging');
	}
	$("#left li,#right li").each(function(){
	this.addEventListener('dragstart',dragstart,false);
	this.addEventListener('dragend',dragend,false);
	});

	$("#left,#right").each(function(){
	this.addEventListener('drop',drop,false);
	this.addEventListener('dragover',dragover,false);
	});

	}();
	});
	</script>
	</head>
	<body>
	<div id="wrap">
	<div class="top" >
	<ul id='top'>
	<li class="draggable" style="background-color:#e0c7fc;">a</li>
	<li class="draggable" style="background-color:#86ed31;">b</li>
	<li class="draggable" style="background-color:#924bc1;">c</li>
	<li class="draggable" style="background-color:#fca16c;" type='container'>container</li>
	<li class="draggable" style="background-color:#ce902d;">e</li>
	<li class="draggable" style="background-color:#0299e5;">f</li>
	<li class="draggable" style="background-color:#bc0585;">g</li>
	<li class="draggable" style="background-color:#f43f42;">h</li>
	</ul>
	</div>
	<div class="center" id='center'> </div>


	<div id="left" class='side'>
	<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	</ul>
	</div>
	<div id="right" class='side'>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	</div>
	</div>
	</body>
	</html>