Drag the list items to change their order.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Items Order - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Change Items Order</h2>
<p>Drag the list items to change their order.</p>
<div style="margin:20px 0;"></div>
<ul style="margin:0;padding:0;margin-left:10px;">
<li class="drag-item">Drag 1</li>
<li class="drag-item">Drag 2</li>
<li class="drag-item">Drag 3</li>
<li class="drag-item">Drag 4</li>
<li class="drag-item">Drag 5</li>
<li class="drag-item">Drag 6</li>
</ul>
<style type="text/css">
.drag-item{
list-style-type:none;
display:block;
padding:5px;
border:1px solid #ccc;
margin:2px;
width:300px;
background:#fafafa;
color:#444;
}
.indicator{
position:absolute;
font-size:9px;
width:10px;
height:10px;
display:none;
color:red;
}
</style>
<script>
$(function(){
var indicator = $('<div class="indicator">>></div>').appendTo('body');
$('.drag-item').draggable({
revert:true,
deltaX:0,
deltaY:0
}).droppable({
onDragOver:function(e,source){
indicator.css({
display:'block',
left:$(this).offset().left-10,
top:$(this).offset().top+$(this).outerHeight()-5
});
},
onDragLeave:function(e,source){
indicator.hide();
},
onDrop:function(e,source){
$(source).insertAfter(this);
indicator.hide();
}
});
});
</script>
</body>
</html>