原生js通过prottype写的一个简单拖拽-CSDN博客

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <style>
		.box{
            position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:0px;top:0px;left:20px;
            /*修饰*/
            border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);
        }
		#box1{
            position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:200px;top:200px;left:20px;
            /*修饰*/
            border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);
        }
		</style>
    </head>
    
    <body>
        
            <div class="box"></div>
			<div id="box1"></div>
    </body> 
<script type="text/javascript">
//@zijian 2015/8/11
function Drag(id){
    this.obj = document.getElementById(id)||document.getElementsByClassName(id)[0];//class or ID
    this.disX = 0;
    this.disY = 0;//Initialization parameters

}

Drag.prototype.init = function (){
    var that = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        that.mouseDown(e);
        // Prevent the default event
        return false;
    };
};

// as the event is mouse
Drag.prototype.mouseDown = function (e){
    var that = this;
    this.disX = e.clientX - this.obj.offsetLeft; //Get mouse parameters for start
    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){
        var e = e || window.event;

        that.mouseMove(e);
    };  

    document.onmouseup = function (){
        that.mouseUp();
    }
};

Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + 'px'; //Get mouse parameters for end
    this.obj.style.top = (e.clientY - this.disY) + 'px';
};

Drag.prototype.mouseUp = function (){
    document.onmousemove = null;
    document.onmouseup = null; //mouse leave status
};


    var drag = new Drag('box');
    drag.init();

	var drag1 = new Drag('box1');
     drag1.init();
	</script>
</html>

转载于:https://www.cnblogs.com/Expando/p/4929783.html