使用mousedown、mousemove、mouseup實現拖拽效果

周國輝發布于2019-08-26 11:34 / 1854人閱讀

摘要：如何實現一個元素的拖拽效果，使用原生的實現，習慣了的同學們，你們自己寫了嗎久使用框架，不寫的東西，感覺自己完全不會了。話不多說，直接上。本例子以簡單的為例子。我是一個可以退拽的

如何實現一個元素的拖拽效果，使用原生的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實現數據拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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