kingwrcy/HTML5 Drag And Drop

## 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>