<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的拖拽</title>
<script type="text/javascript" src="
http://code.jquery.com/jquery-1.9.1.js"></script><style>
*{ padding:0;margin:0;font-size:12px; }
.list{ width:360px;height:230px;background-color:#eee;margin:24px auto; }
.list .listview{ width:98px;height:98px;border:1px solid #555;margin:10px 0 0px 15px;float:left;position:relative;user-select:none; }
.list .spots{ padding:0 5px;cursor:pointer;position:absolute;left:0;top:0; }
.list .cont{ position:absolute;right:5px;top:0; }
</style>
</head>
<body>
<div class="list">
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">1</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">2</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">3</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">4</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">5</div>
</div>
<div class="listview">
<span class="spots" draggable="true">…</span>
<div class="cont">6</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$('.spots').bind('dragstart', function(e){
e.originalEvent.dataTransfer.setData( "m_data", $(this).parent().index() );
});
$('.list').bind('dragover', function(e){
e.preventDefault();
});
$('.listview').bind('drop', function(e){
e.preventDefault();
var p_index = e.originalEvent.dataTransfer.getData("m_data");
var p_index_this = $(this).index();
if( p_index > p_index_this ){
$('.listview').eq(p_index_this).before($('.listview').eq(p_index));
}else{
$('.listview').eq(p_index_this).after($('.listview').eq(p_index));
}
});
});
</script>
</html>
本回答被网友采纳