代码：拖拽

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//拖拽的实现
var startDrag = {
moveFlag:false,//拖动时为true
Rx:0,
Ry:0,
init:function(target,bar){
target.mousedown(function(event) {
startDrag.Rx = event.pageX - (parseInt(target.css("left")) || 0);
startDrag.Ry = event.pageY - (parseInt(target.css("top")) || 0);
target.css("position", "absolute").css('cursor', 'move');
startDrag.moveFlag = true;
}).mouseup(function() {
startDrag.moveFlag = false;
target.css('cursor', 'auto');
});
$(document).mousemove(function(event) {
if (startDrag.moveFlag) {
target.css({
top: event.pageY - startDrag.Ry,
left: event.pageX - startDrag.Rx
});
}
});
}
}
startDrag.init($('.abs-banner'), $('.min-banner-head'));
});
</script>
<style type="text/css">
.abs-banner{position:absolute;left:100px;top:100px;padding:0;background:#f0f3f9;font-size:12px;box-shadow:2px 2px 4px #666666;}
.min-banner-head{line-height:24px;background:#beceeb;border-bottom:1px solid #a0b3d6;padding-left:5px;cursor:move;}
.min-banner-body{width:420px;height:250px;padding:10px 5px;}
</style>
<h1>拖拽</h1>
<div class="abs-banner">
<div class="min-banner-head">拖拽</div>
<div class="min-banner-body">内容……</div>
</div>