簡單實現元素可拖動的效果

z2xy 發布于2019-08-20 18:02 / 564人閱讀

摘要：簡單實現一個可拖動元素的效果，參考了了張鑫旭大神的代碼。需求說明創建一個函數，接收兩個參數，和，即點擊后觸發拖動效果的元素和要拖動的元素。當在上點擊鼠標時會觸發拖動的效果，松開鼠標后不再拖動。

簡單實現一個可拖動元素的效果，參考了了張鑫旭大神的代碼。

需求說明

創建一個函數，接收兩個參數，triggerElement和targetElement，即點擊后觸發拖動效果的元素和要拖動的元素。當在triggerElement上點擊鼠標時會觸發拖動targetElement的效果，松開鼠標后不再拖動。

實現思路

給觸發拖動的元素添加點擊事件監聽函數；

點擊觸發元素之后，在點擊事件處理函數內部，為document添加鼠標移動(mousemove)的事件監聽；

還需要在松開鼠標后，停止拖動，所以需要為document添加鼠標松開(mouseup)的事件監聽；

代碼

先給觸發元素添加點擊事件

    function startDrag(triggerElement, targetElement) {
      triggerElement.addEventListener("mousedown", function (event) {
        var originMouseX, originMouseY, moveX, moveY;

        originMouseX = event.clientX
        originMouseY = event.clientY
        document.addEventListener("mousemove", mouseMove, false)
        document.addEventListener("mouseup", mouseUp, false)

        function mouseMove(event) {
          moveX = event.clientX - originMouseX
          moveY = event.clientY - originMouseY
          originMouseX = event.clientX
          originMouseY = event.clientY
          targetElement.style.left = +moveX + +targetElement.offsetLeft + "px"
          targetElement.style.top = +moveY + +targetElement.offsetTop + "px"
          // 防止選取文字
          event.preventDefault();
          triggerElement.onselectstart = function () {
            return false;
          }
        } // mouseMove end

        function mouseUp(event) {
          document.removeEventListener("mousemove", mouseMove, false)
          document.removeEventListener("mouseup", mouseUp, false)
        } // mouseUp end
      }, false)
    }

使用

和張鑫旭大神的一樣，只需要調用這個函數，將兩個元素:觸發拖動的元素和被拖動的元素，傳進函數就可以了
PS:被拖動的元素需要設置絕對定位：position: absolute;

GPU云服務器云服務器 dom元素可拖動可拖動表格拖動元素元素拖動

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84031.html

使用 Drag and Drop 給Web應用提升交互體驗

摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。什么是 Drag and Drop （拖放）？簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。我相信每個人都或多或少接觸過拖放，比如瀏覽...

legendmohe 2019-08-02 12:03 評論0 收藏0
Drag&Drop 拖放API簡介以及在React中的實踐

摘要：如其他屬性及方法，詳細可以查看跨終端能力跨終端能力是最大的特點。在指定區域的事件中，通過對象的屬性，即可獲得文件列表信息，如打印文件名在中實踐在項目中使用，依然遵循數據驅動的原則，即事件數據更新。同時，在事件中執行判斷。最近有個需求，需要產品導航欄支持拖放。雖然開源社區已有不少成熟的拖放庫，但考慮到代碼可控性和可定制性，還是自己寫吧。選型關于選型，前端實現拖放功能，無外乎幾種： 1、通...

lcodecorex 2019-05-23 17:27 評論0 收藏0
原生JS快速實現拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實現這樣的拖放效果的內容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果： showImg(https://s...

objc94 2019-08-02 15:22 評論0 收藏0
原生JS快速實現拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實現這樣的拖放效果的內容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果： showImg(https://s...

arashicage 2019-08-30 11:14 評論0 收藏0
原生JS快速實現拖放（drag and drop）效果

摘要：接下來我們就用原生和快速實現這樣的拖放效果的內容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設置屬性為，表示該元素可以被拖拽。拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果： showImg(https://s...

jzzlee 2019-08-23 18:15 評論0 收藏0