<!DOCTYPE html>
<html lang=\'zh-cn\'>
<head>
<title>Insert you title</title>
<meta name=\'description\' content=\'this is my page\'>
<meta name=\'keywords\' content=\'keyword1,keyword2,keyword3\'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=\'text/javascript\' src=\'./js/jquery-1.12.1.min.js\'></script>
<style type=\'text/css\'>
html,body,div,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrap {
width: 500px;
height: 350px;
margin: 25px auto;
}
ul li {
width: 100%;
height: 45px;
text-align: center;
font: 400 14px/45px Microsoft yahei;
cursor: pointer;
border-radius: 2px;
color: #FFF;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
$( function(){
var cur = null;
var oWrap = getId( \'wrap\' );
var oList = getId( \'list\' );
var aLi = oWrap.getElementsByTagName( \'li\' );
function sort(){
for( var i = 0 ; i < aLi.length ; i++ ){
aLi[ i ].index = i;
aLi[ i ].ondragstart = function( ev ){
var ev = ev || window.event;
var target = ev.srcElement ? ev.srcElement : ev.target;
ev.dataTransfer.setData( \'data\' , target.innerHTML );
this.innerHTML = \'处于被拖拽中嗬...\';
cur = this.index;
};
aLi[ i ].ondragenter = function(){
for( var j = 0 ; j < aLi.length ; j++ ){
aLi[ j ].style.border = \'0px\';
}
if( cur != this.index ){
this.style.border = \'3px solid #FFA6B5\';
}
};
aLi[ i ].ondragover = function( ev ){
var ev = ev || window.event;
ev.preventDefault();
};
aLi[ i ].ondrop = function( ev ){
var ev = ev || window.event;
ev.preventDefault();
this.style.border = \'0px\';
aLi[ cur ].innerHTML = ev.dataTransfer.getData( \'data\' );
oList.insertBefore( aLi[ cur ] , this );
sort(); /* 递归 : 序列号更新 */
};
}
}
sort();
} );
function getId( id ){
return document.getElementById( id );
}
</script>
</head>
<body>
<div id=\'wrap\'>
<ul id=\'list\'>
<li style=\'background:#0080C0;\' draggable=\'true\'>1</li>
<li style=\'background:#800040;\' draggable=\'true\'>2</li>
<li style=\'background:#008040;\' draggable=\'true\'>3</li>
<li style=\'background:#000080;\' draggable=\'true\'>4</li>
<li style=\'background:#FC8030;\' draggable=\'true\'>5</li>
<li style=\'background:#F63080;\' draggable=\'true\'>6</li>
<li style=\'background:#800000;\' draggable=\'true\'>7</li>
</ul>
</div>
</body>
</html>