拖拽

作者: 向北_f098 | 来源:发表于2017-10-12 20:35 被阅读0次

    建立函数

    function DragBox(boxId) {
        if (boxId == undefined) {
            return;
        }
        this.ele = document.getElementById(boxId);
        var self = this;
        this.ele.onmousedown = function(e) {
            self.detaX = e.clientX - self.ele.offsetLeft;
            self.detaY = e.clientY - self.ele.offsetTop;
            self.start();
            document.onmouseup = function() {
                self.stop();
            }
        }
    }```
    ##方法
    
    ```DragBox.prototype.start = function() {
        var self = this;
        document.onmousemove = function(e) {
            var x = e.clientX - self.detaX;
            var y = e.clientY - self.detaY;
    
            self.move(x, y)
        }
    }
    DragBox.prototype.move = function(x, y) {
        var self = this;
        self.ele.style.left = x + "px";
        self.ele.style.top = y + "px";
    }
    DragBox.prototype.stop = function() {
        document.onmousemove = null;
    }```
    ##继承
    ```function DragBoxText(r){
                DragBox.call(this,r)
            }
            DragBoxText.prototype=new DragBox
            DragBoxText.prototype.move=function (x,y){
                DragBoxText.prototype.move.call(this,x,y)
                this.ele.innerHTML=x+","+y
            }```

    相关文章

      网友评论

          本文标题:拖拽

          本文链接:https://www.haomeiwen.com/subject/uywoyxtx.html