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