使用纯JS的Javascript draggable和helper

时间:2014-04-25 12:47:25

标签: javascript

我需要在draggable元素上创建帮助器(类似于旧的win xp或其他os [idk],当你移动窗口时,你首先看到" shadow"然后窗口移动到那个位置),但只有纯JS(没有jQuery!)。原因:在我的项目中,我需要捕捉一些功能和事件,暂时不重要。

以下是我现在所拥有的代码:http://bit.ly/RShqz6

var Draggable = function (id) {
  var el = document.getElementById(id),
    isDragReady = false,
    dragoffset = {
      x: 0,
      y: 0
    };
  this.init = function () {
    //only for this demo
     el.style.position = "absolute";
    //this.initPosition();
    this.events();
  };
  //only for this demo
  this.initPosition = function () {
    el.style.top = "20px";
    el.style.left = "48%";
  };
  //events for the element
  this.events = function () {
    var self = this;
    _on(el, 'mousedown', function (e) {
      isDragReady = true;
      //corssbrowser mouse pointer values
      e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
        document.documentElement.scrollLeft :
        document.body.scrollLeft);
      e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
        document.documentElement.scrollTop :
        document.body.scrollTop);
      dragoffset.x = e.pageX - el.offsetLeft;
      dragoffset.y = e.pageY - el.offsetTop;
    });
    _on(document, 'mouseup', function () {
      isDragReady = false;
    });
    _on(document, 'mousemove', function (e) {
      if (isDragReady) {
        e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
          document.documentElement.scrollLeft :
          document.body.scrollLeft);
        e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
          document.documentElement.scrollTop :
          document.body.scrollTop);
        el.style.top = (e.pageY - dragoffset.y) + "px";
        el.style.left = (e.pageX - dragoffset.x) + "px";
      }
    });
  };
  //cross browser event Helper function
  var _on = function (el, event, fn) {
    document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
  };
  this.init();
}

new Draggable('box');

有什么想法吗?

0 个答案:

没有答案