拖拽

作者: 向北_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
        }```

相关文章

  • 拖拽操作

    应用: 1.拖拽排序2.拖拽上传3.拖拽裁剪 拖拽流程 确定可拖拽的内容-->开始拖拽-->拖拽过程-->结束拖拽...

  • Html5 + Css 3 文件拖拽上传功能

    拖拽上传文件功能 拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用...

  • 拖拽上传

    拖拽事件 拖拽元素ondrag 应用于拖拽元素,整个拖拽过程都会调用ondragstart应用于拖拽元素,...

  • js:拖拽事件

    拖拽事件 ondragstart当拖拽元素被开始拖拽时,event:拖拽元素。[从操作系统向浏览器拖拽文件不会触发...

  • HTML 5 拖拽

    @(HTML5)[HTML 5拖拽] [TOC] 十三、HTML 5 拖拽 HTML 5 拖拽事件 图片自带拖拽功...

  • JQuery UI 拖拽排序

    禁用拖拽: 启用拖拽:

  • MacOS 开发(十六) : 文件拖拽

    文件拖拽的核心是拖拽目标视图 (DragDestinationView),此方法会检测目标是否可拖拽类型,拖拽文件...

  • HTML5拖拽上传

    传统拖拽效果小demohtml5实现拖拽小demo调查问卷小demo拖拽拼图小demo拖拽上传小demo h5拖拽...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • 元素拖曳 H5

    拖拽 如何让一个元素变成拖拽元素 draggable=‘true’ ondrag 应用于拖拽元素,整个拖拽过程都会...

网友评论

      本文标题:拖拽

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