1.基于jquery
2.效率优先
3.可配置项(拖动者，鼠标样式，拖动范围)
欢迎PK效率！！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="css/main.css"/>
<style type="text/css">
.container{
width:500px;
height:500px;
border:2px solid #ccc;
margin:100px auto;
}
.main{
position:absolute;
top:50px;
left:200px;
}
.test{
position:absolute;
width:200px;
height:200px;
border:1px solid #ccc;
background:#efefef;
top:10px;
left:10px;
}
.drag{
background:#ff0000;
color:#fff;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="main">
<div class="test">
<div class="drag">fjsdkljf</div>
fjsdklfjklsd <br> <br>fdsjkfsdjkl
</div>
</div>
</div>
jfklsdjkfjklsdjfkljsdkl<br>
jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>jfklsdjkfjklsdjfkljsdkl<br>
</div>
<script src="/test/common/jquery.js"></script>
<script src="/test/common/base.js"></script>
<script>
(function($){
var Dragdrop = DH.Base.create({
init : function(){
this.begin = {};
this.canDrag = false;
this.$drag = this.options.dragSelector ? this.el.find(this.options.dragSelector) : this.el; // 拖动元素
this.$scope = this.options.scopeSelector && $(this.options.scopeSelector); // 拖动范围
this.$move = this.el; // 移动元素
this.cursor = this.options.cursor || ‘move‘; // 鼠标样式
this.dragFn = this.proxy(this.drag);
this.resetFn = this.proxy(this.reset);
this.$drag.bind(‘mousedown‘, this.dragFn);
$(window).bind(‘resize‘, this.resetFn);
this.reset();
},
reset : function(){
if(this.$scope){
var $move = this.$move,
$scope = this.$scope,
minLeft = 0,
maxLeft = $move.width(),
minTop = 0,
maxTop = $move.height(),
offset = $move.offset(),
oleft = offset.left,
otop =
offset.top,
position = $move.position(),
pleft = position.left,
ptop = position.top,
eleft = parseFloat($move.css(‘left‘)),
etop = parseFloat($move.css(‘top‘)),
scopeOffset =
$scope.position(),
scopeLeft = scopeOffset.left,
scopeTop = scopeOffset.top,
scopeWith =
$scope.width(),
scopeHeight = $scope.height(),
width = $move.width(),
height =
$move.height()
;
if(parseFloat($scope.css(‘marginLeft‘)) > 0){
scopeLeft += parseFloat($scope.css(‘marginLeft‘));
}
if(parseFloat($scope.css(‘marginTop‘)) > 0){
scopeTop += parseFloat($scope.css(‘marginTop‘));
}
minLeft = scopeLeft - (oleft - pleft);
maxLeft = scopeLeft - (oleft - pleft) + scopeWith - width;
minTop = scopeTop - (otop - ptop);
maxTop = scopeTop - (otop - ptop) + scopeHeight - height;
this.defaults = {
minLeft : minLeft,
maxLeft : maxLeft,
minTop : minTop,
maxTop : maxTop
}
}
},
drag : function(e){
var $move = this.$move,
$drag = this.$drag,
$scope = this.$scope,
pageX = e.pageX,
pageY = e.pageY,
left =
parseFloat($move.css(‘left‘)),
top =
parseFloat($move.css(‘top‘))
;
isNaN(left) && (left = 0); // fixed ie
isNaN(top) && (top = 0); // fixed ie
this.begin = {
left : pageX - left,
top : pageY - top
};
$drag.css(‘cursor‘, this.cursor);
$move.css(‘-moz-user-select‘, ‘none‘); // stop moz text select
this.moveFn = this.proxy(this.move);
this.stopFn =
this.proxy(this.stop);
$(document)
.bind(‘mousemove‘, this.moveFn)
.bind(‘mouseup‘, this.stopFn)
.bind(‘selectstart‘,
this.stopBubble); // stop ie text select
;
this.canDrag = true;
},
move : function(e){
if(!this.canDrag) return;
var $move = this.$move,
$scope = this.$scope,
pageX = e.pageX,
pageY = e.pageY,
begin = this.begin,
left = pageX - begin.left,
top = pageY - begin.top
;
if(this.defaults){
var defaults = this.defaults;
if(left < defaults.minLeft){
left =
defaults.minLeft;
}else if(left > defaults.maxLeft){
left = defaults.maxLeft;
}
if(top < defaults.minTop){
top =
defaults.minTop;
}else if(top > defaults.maxTop){
top = defaults.maxTop;
}
}
$move
.css({
left : left,
top : top
});
},
stop : function(){
this.$drag.css(‘cursor‘,
‘‘);
this.$move.css(‘-moz-user-select‘, ‘‘);
$(document)
.unbind(‘mousemove‘, this.moveFn)
.unbind(‘mouseup‘, this.stopFn)
.unbind(‘selectstart‘,
this.stopBubble);
;
this.canDrag = false;
},
stopBubble: function(){
return false;
},
destory : function(){
this.stop();
this.$drag.unbind(‘mousedown‘,
this.dragFn);
$(window).unbind(‘resize‘, this.resetFn);
this.$drag = null;
this.$move = null;
this.$scope = null;
this.begin = null;
this.defaults = null;
}
});
new Dragdrop({ el : ‘.test‘, cursor : ‘pointer‘, dragSelector : ‘.drag‘, scopeSelector : ‘.container‘ }); })(window.jQuery); </script> </body> </html>
原文：http://www.cnblogs.com/jackliu6/p/3669250.html