zoukankan      html  css  js  c++  java
  • 一步一步理解拖拽Drag(一)

    拖拽三部曲原理:
         1、鼠标按下;
         2、鼠标移动;
         3、鼠标抬起。

    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Drag一步一步理解拖拽</title>
    <script type="text/javascript">
    var base = {
    getId:
    function (id) {
    return document.getElementById(id);
    },
    addEvent:
    function (elem, type, fn) {
    if (elem.addEventListener) {
    elem.addEventListener(type, fn,
    false);
    }
    else if (elem.attachEvent) {
    elem.attachEvent(
    "on" + type, fn);
    }
    else {
    elem[
    "on" + type] = fn;
    }
    },
    removeEvent:
    function (elem, type, fn) {
    if (elem.removeEventListener) {
    elem.removeEventListener(type, fn,
    false);
    }
    else if (elem.detachEvent) {
    elem.detachEvent(
    "on" + type, fn);
    }
    else {
    elem[
    "on" + type] = null;
    }
    }
    };

    function Drag(obj) {
    this.obj = obj;
    var _this = this;
    base.addEvent(obj,
    "mousedown", function (event) {
    _this.startDrap(event);
    });
    }

    Drag.prototype
    = {
    startDrap:
    function (event) {
    var _this = this;

    this.mousemoveHandle = function (event) {
    _this.move();
    };

    this.mouseupHandle = function () {
    _this.stopDrag();
    };

    base.addEvent(document,
    "mousemove", this.mousemoveHandle);

    base.addEvent(document,
    "mouseup", this.mouseupHandle);

    base.getId(
    "mdiv").innerHTML = "鼠标被按下了";
    },
    move:
    function () {
    base.getId(
    "mdiv").innerHTML = "鼠标移动中。。。。";

    this.obj.style.left = event.clientX - this.obj.offsetLeft + "px";
    this.obj.style.top = event.clientY - this.obj.offsetTop + "px";
    },
    stopDrag:
    function () {
    base.removeEvent(document,
    "mousemove", this.mousemoveHandle);
    base.removeEvent(document,
    "mouseup", this.mouseupHandle);

    base.getId(
    "mdiv").innerHTML = "鼠标抬起了";
    }
    };


    base.addEvent(window,
    "load", function () {
    var tmp = base.getId("mdiv");
    var b = new Drag(tmp);
    });
    </script>
    </head>
    <body>
    <div id="mdiv" style=" 300px; height: 100px; border: 1px solid red; position: absolute">
    </div>
    </body>
    </html>
  • 相关阅读:
    浅析一类要求相邻不同的环上染色问题
    中国剩余定理(CRT)及其扩展(ExCRT)
    bsoj5988 [Achen模拟赛]期望 题解
    涂色游戏 题解
    [JZOJ A组]球 题解
    由 [SDOI2012]Longge的问题 探讨欧拉函数和莫比乌斯函数的一些性质和关联
    [NOIP模拟]文本编辑器 题解
    Nilearn 小记
    django 开发笔记1
    浅谈无需工作量证明的加密货币
  • 原文地址:https://www.cnblogs.com/kuikui/p/2312265.html
Copyright © 2011-2022 走看看