/index.html

## index.html
<!doctype html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Sortable jQuery Plugin</title>
	<style>
	#div1 {width:800px;height:400px;padding:10px;border:1px solid #aaaaaa; overflow: auto;}
		header, section {
			display: block;
		}
		#features {
			margin: auto;
			width: 460px;
			font-size: 0.9em;
		}
		.connected, .sortable001, .exclude, .handles {
			margin: auto;
			padding: 0;
			width: 730px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.sortable001.grid {
			overflow: hidden;
		}
		.connected li, .sortable001 li, .exclude li, .handles li {
			list-style: none;
			border: 1px solid #CCC;
			background: #F6F6F6;
			font-family: "Tahoma";
			color: #1C94C4;
			margin: 5px;
			padding: 5px;
			height: 22px;
		}
		.handles span {
			cursor: move;
		}
		li.disabled {
			opacity: 0.5;
		}
		.sortable001.grid li {
			line-height: 80px;
			float: left;
			width: 180px;
			height: 100px;
			text-align: center;
		}
		li.highlight {
			background: #FEE25F;
		}
		li.sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
		}
	</style>
<script>
    function allowDrop(ev) {
        //alert("IN allowDrop(ev)");
        ev.preventDefault();
    }
    function drag(ev) {
        //alert("IN drag(ev)");
        ev.dataTransfer.setData("text/html", ev.target.id);
    }
    function drop(ev) {
        alert("IN drop(ev)");
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text/html");

       var x = document.createElement("A");
       x.setAttribute("href","http://www.vip.com");
       x.appendChild(document.getElementById(data));

       var myList = document.getElementById("SortableList");
       var newli = document.createElement("li");
       newli.appendChild(x);
       myList.appendChild(newli);
       $('.sortable001').sortable();
    }
</script>

</head>

<body>
	<header>
		<h1>HTML5 Sortable jQuery Plugin</h1>
	</header>
<center>
<h1>My favorite vedio websites</h1>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

	<section>
		<ul id="SortableList" class="sortable001 grid">
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
			<li>item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
		</ul>
	</section>

</div>
</center>

   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script src="../src/html.sortable.js"></script>
	<script>
		$(function() {
			$('.sortable001').sortable();
		});
	</script>

<center>
<h1>
<p id="drag7" draggable="true" ondragstart="drag(event)">new item</p>
</h1>
</center>

</body>
</html>

## yzrFc.markdown

      
    Raw
  

              yzrFc.markdown
            
          
    yzrFc

A Pen by Captain Anonymous on CodePen.
License.
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>HTML5 Sortable jQuery Plugin</title>
	<style>
	#div1 {width:800px;height:400px;padding:10px;border:1px solid #aaaaaa; overflow: auto;}
	header, section {
	display: block;
	}
	#features {
	margin: auto;
	width: 460px;
	font-size: 0.9em;
	}
	.connected, .sortable001, .exclude, .handles {
	margin: auto;
	padding: 0;
	width: 730px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	.sortable001.grid {
	overflow: hidden;
	}
	.connected li, .sortable001 li, .exclude li, .handles li {
	list-style: none;
	border: 1px solid #CCC;
	background: #F6F6F6;
	font-family: "Tahoma";
	color: #1C94C4;
	margin: 5px;
	padding: 5px;
	height: 22px;
	}
	.handles span {
	cursor: move;
	}
	li.disabled {
	opacity: 0.5;
	}
	.sortable001.grid li {
	line-height: 80px;
	float: left;
	width: 180px;
	height: 100px;
	text-align: center;
	}
	li.highlight {
	background: #FEE25F;
	}
	li.sortable-placeholder {
	border: 1px dashed #CCC;
	background: none;
	}
	</style>
	<script>
	function allowDrop(ev) {
	//alert("IN allowDrop(ev)");
	ev.preventDefault();
	}
	function drag(ev) {
	//alert("IN drag(ev)");
	ev.dataTransfer.setData("text/html", ev.target.id);
	}
	function drop(ev) {
	alert("IN drop(ev)");
	ev.preventDefault();
	var data = ev.dataTransfer.getData("text/html");

	var x = document.createElement("A");
	x.setAttribute("href","http://www.vip.com");
	x.appendChild(document.getElementById(data));

	var myList = document.getElementById("SortableList");
	var newli = document.createElement("li");
	newli.appendChild(x);
	myList.appendChild(newli);
	$('.sortable001').sortable();
	}
	</script>

	</head>

	<body>
	<header>
	<h1>HTML5 Sortable jQuery Plugin</h1>
	</header>
	<center>
	<h1>My favorite vedio websites</h1>
	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

	<section>
	<ul id="SortableList" class="sortable001 grid">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
	</ul>
	</section>

	</div>
	</center>

	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script src="../src/html.sortable.js"></script>
	<script>
	$(function() {
	$('.sortable001').sortable();
	});
	</script>

	<center>
	<h1>
	<p id="drag7" draggable="true" ondragstart="drag(event)">new item</p>
	</h1>
	</center>

	</body>
	</html>