<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style type="text/css">
.drag-item{
list-style-type:none;
display:block;
padding:5px;
border:1px solid #ccc;
margin:2px;
width:300px;
background:#fafafa;
}
#place-hold{
list-style-type:none;
display:block;
padding:5px;
margin:3px;
width:300px;
}
.indicator{
position:absolute;
padding:5px;
border:1px solid #ccc;
margin:2px;
height:20px;
width:300px;
background:#fafafa;
}
</style>
<script>
$(function(){
var indicator = $('<li id="place-hold"> </li>');
$('.drag-item').draggable({
revert:true,
deltaX:0,
deltaY:0,
axis:'v',
onStartDrag:function(e){
$(this).after(indicator);
},
onStopDrag:function(e){
indicator.hide();
}
}).droppable({
onDragLeave:function(e,source){
indicator.hide();
},
onDragEnter:function(e,source){
$(this).after(indicator);
indicator.show();
},
onDrop:function(e,source){
$(this).after(source);
}
});
});
</script>
</head>
<body>
<h1>DragDrop</h1>
<ul style="margin:0;padding:0;margin-left:10px;" id="dd">
<li class="drag-item" sid="1">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>
</body>
</html>原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16345.html