使用mousedown、mousemove、mouseup实现拖拽效果

周国辉发布于2019-08-26 11:34 / 1823人阅读

摘要：如何实现一个元素的拖拽效果，使用原生的实现，习惯了的同学们，你们自己写了吗久使用框架，不写的东西，感觉自己完全不会了。话不多说，直接上。本例子以简单的为例子。我是一个可以退拽的

如何实现一个元素的拖拽效果，使用原生的js实现，习惯了jquery的同学们，你们自己写了吗？N久使用mvvm框架，不写jquery的东西，感觉自己完全不会了。

话不多说，直接上code。本例子以简单的div为例子。

html

我是一个可以退拽的div

css

div {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #999;
  padding: 10px;
  cursor: pointer;
}

javascript

window.onload = funtion() {
  const div = document.getElementById("div");
  let initPosition = {};


  div.addEventListener("mousedown", onMousedown);
  
  function onMousedown(event) {
    
    const { pageX, pageY } = event;
    initPosition = getPosition();

    document.addEventListener("mousemove", omMousemove);
    document.addEventListener("mouseup", onMouseUp);

  }

  function omMousemove(event) {
    const { pageX, pageY } = event;
    const { left, top} = calcPosition(pageX, pageY);

    div.style.cssText = `left:${left}px;top:${top}px;`;

  }

  function onMouseUp(event) {
    document.removeEventListener("mousemove", onMouseMove);
  }


  function calcPosition(pageX, pageY) {

    const { left, top, scrollLeft, maxCriticalX, maxCriticalY } = initPosition;

    let x = pageX - left;
    let y = pageY - top;

    if (x <= scrollLeft) {
      x = scrollLeft;
    }

    if (x >= maxCriticalX) {
      x = maxCriticalX;
    }

    if (y >= maxCriticalY) {
      y = maxCriticalY;
    }

    if ( y<=0 || maxCriticalY < 0) {
      y = 0;
    }

    return {
      left: x,
      top: y
    };
  }



  function getPosition() {
    const { left, top, width, height } = div.getBoundingClientRect();
    const { scrollLeft, scrollTop } = document.body;

    const maxCriticalX = scrollLeft + innerWidth - width;
    const maxCriticalY = scrollTop + innerHeight - height;

    return {
        left,
        top,
        scrollLeft,
        maxCriticalX,
        maxCriticalY
    };
  }
};

GPU云服务器云服务器 jQuery拖拽效果 js拖拽效果实现拖拽 js实现数据拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107134.html

RxJS 实战篇（一）拖拽

摘要：相比之下，响应式编程在解决此类问题上有着得天独厚的优势。当然要加深对的理解还是得多多实战。要实现一个简单的拖拽，需要对等多个事件进行观察，并相应地改变小方块的位置。具体实现可以参见添加初始延迟需求在拖拽的实际应用中，有时会希望有个初始延迟。本文最初发布于我的个人博客：咀嚼之味面对交互性很强、数据变化复杂的场景，传统的前端开发方式往往存在一些共有的问题：1). UI 状态与数据难以追...

frontoldman 2019-08-20 17:28 评论0 收藏0
js面向对象练习-拖拽效果

摘要：因为对象只出现在事件中，所以我们要把对象保存变量，然后通过参数传递后面的函数和函数就没什么要注意的地方了要注意的问题关于指针的问题，面向对象里面特别重要拓展阅读关于对象的问题，对象只出现在事件里面，所以写方法的时候要注意一下首先来了解一下，面向对象练习的基本规则和问题：先写出普通的写法，然后改成面向对象写法项普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量...

haoguo 2019-08-21 10:26 评论0 收藏0
简单的支持网页画框拖拽缩放功能的js插件

摘要：我就不提除此以外还需要实现的一些业务上的细节交互了，本篇文章只讲讲我实现的拖拽功能的原理。这里其实大家就可以看出来了，得益于面向对象的机制，我们可以很简单的实现一些画框拖拽功能。引言前不久，老大给我分配一个比较吊炸天的任务。要我实现：在一张图片上，可以用鼠标画框。除此以外，画出来的框，可以实现resize，也就是说可以通过鼠标操作缩放，也可以进行拖拽。我就不提除此以外还需要实现的一...

oneasp 2019-08-29 11:14 评论0 收藏0
简单的支持网页画框拖拽缩放功能的js插件

摘要：我就不提除此以外还需要实现的一些业务上的细节交互了，本篇文章只讲讲我实现的拖拽功能的原理。这里其实大家就可以看出来了，得益于面向对象的机制，我们可以很简单的实现一些画框拖拽功能。引言前不久，老大给我分配一个比较吊炸天的任务。要我实现：在一张图片上，可以用鼠标画框。除此以外，画出来的框，可以实现resize，也就是说可以通过鼠标操作缩放，也可以进行拖拽。我就不提除此以外还需要实现的一...

MangoGoing 2019-08-01 15:39 评论0 收藏0