demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>拖拽移动demo</title>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<style>
*{padding:0; margin: 0;}
</style>
</head>
<body>
<div style="margin:0 auto; width: 500px; height: 300px; border: 1px solid #ff0000; position: relative;">
<div style="position: absolute;" class="dragable">
<img src="http://s0.ifengimg.com/2015/05/18/3c3b77e548648bb98b2bab65fe2170ee.jpg">
</div>
</div>
<script src="DragMove.js"></script>
<script>
$(function(){
var drag = new DragMove();
drag.init();
});
</script>
</body>
</html>
js:
function DragMove(){
this.dragElements = null;
this.X = null;
this.Y = null;
this.moveX = null;
this.moveY = null;
this.moveTag = null;
this.dragParentWidth = null;
this.dragParentHeight = null;
this.dragParentLeft = null;
this.dragParentTop = null;
this.dragWidth = null;
this.dragHeight = null;
}
DragMove.prototype = {
init: function(){
this.dragElements = $(".dragable");
this.bind();
},
bind: function(){
var me = this;
me.dragElements.on("mousedown", function(e){
e.preventDefault();
var tgt = me.getTarget(e);
me.moveTag = true;
me.dragWidth = tgt.width();
me.dragHeight = tgt.height();
me.dragParentWidth = tgt.offsetParent().width();
me.dragParentHeight = tgt.offsetParent().height();
me.dragParentLeft = tgt.offsetParent().offset().left;
me.dragParentTop = tgt.offsetParent().offset().top;
});
me.dragElements.on("mousemove", function(e){
e.preventDefault();
if( me.moveTag ){
var tgt = me.getTarget(e);
me.moveX = e.pageX;
me.moveY = e.pageY;
me.X = me.moveX - me.dragParentLeft - me.dragWidth / 2;
me.Y = me.moveY - me.dragParentTop - me.dragHeight / 2;
if( me.X <= 0 ) me.X = 0;
if( me.X >= me.dragParentWidth - me.dragWidth ) me.X = me.dragParentWidth - me.dragWidth;
if( me.Y <= 0 ) me.Y = 0;
if( me.Y >= me.dragParentHeight - me.dragHeight ) me.Y = me.dragParentHeight - me.dragHeight;
tgt.css({
"left": me.X + "px",
"top": me.Y + "px"
});
}
});
me.dragElements.on("mouseup", function(e){
e.preventDefault();
me.moveTag = false;
});
},
getTarget: function(e){
if(!$(e.target).hasClass("dragable")){
return $(e.target).parent(".dragable");
}else{
return $(e.target);
}
}
};
时间： 2024-10-29 09:35:29