G43riko
11/16/2017 - 1:20 PM

Sortable

sortableList.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#playlist {
			width: 400px;
			height: 600px;
			border: 1px solid black;
			background-color: white; 
		}

		#playlist ul {
			list-style: none;
			padding: 0;
		}

		#playlist li {
		    position: relative;
		    left: 0;
		    background-color: rgba(190, 250, 255, 0.16);
		    width: calc(100% - 20px);
		    /* border: 1px solid rgba(190, 250, 255, 0.36); */
		    margin-top: 2px;
		    margin-left: 10px;
		    cursor: pointer;
		    border-radius: 3px;
		    height: 20px;
		    box-sizing: border-box;
		}
		#playlist .title {
			float: left;
			margin-left: 5px;
		}
		#playlist .button {
			float: right;
		    width: 20px;
		    margin-right: 5px;
		    background-color: rgba(190, 250, 255, 0.36);
		    height: 18px;
		    position: relative;
		    text-align: center;
		    display: none;
		    line-height: 20px;
		    border: 1px solid rgba(195, 248, 253, 0.7);
		    border-radius: 4px;
		}
		#playlist .button:hover {
		    background-color: rgba(190, 250, 255, 0.56);
		}
		#playlist li:hover {
		    background-color: rgba(190, 250, 255, 0.26);
		}
		#playlist li:active {
		    background-color: rgba(190, 250, 255, 0.56);
		}
		#playlist li:hover .button {
			display: inline-block;
		}
	</style>
</head>
<body>
	<div id="playlist">
		<ul ondrop="drop(event)" ondragover="allowDrop(event)">
			<li draggable="true" ondragstart="drag(event)">
				<span class="title">nieco0</span>
				<span class="button">&#8942;</span>
			</li>
			<li draggable="true" ondragstart="drag(event)">
				<span class="title">nieco1</span>
				<span class="button">&#8942;</span>
			</li>
			<li draggable="true" ondragstart="drag(event)">
				<span class="title">nieco2</span>
				<span class="button">&#8942;</span>
			</li>
			<li draggable="true" ondragstart="drag(event)">
				<span class="title">nieco3</span>
				<span class="button">&#8942;</span>
			</li>
		</ul>
	</div>
</body>
</html>
<script>
	function allowDrop(ev) {
	    ev.preventDefault();
	}

	function drag(ev) {
	    ev.target.classList.add("moved");
	}


	function drop(ev) {
		function indexOf(child){
			let i = 0;
			while( (child = child.previousElementSibling) != null ){
				i++;
			}
			return i;
		}
	    const movedElement = document.getElementsByClassName("moved")[0];
	    movedElement.classList.remove("moved");

	    const indexOfMovedElement = indexOf(movedElement);

	    const parent = movedElement.parentElement;
		parent.removeChild(movedElement);

		const nextElement = ev.target.nextElementSibling;
		if(nextElement) {
			if (indexOf(nextElement) > indexOfMovedElement) {
				parent.insertBefore(movedElement, nextElement);
			}
			else {
				parent.insertBefore(movedElement, ev.target);
			}
		} 
		else {
			parent.appendChild(movedElement)
		}

	    ev.preventDefault();
	}
</script>