亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡單實現(xiàn)元素可拖動的效果

z2xy / 605人閱讀

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

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

需求說明

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

實現(xiàn)思路

給觸發(fā)拖動的元素添加點擊事件監(jiān)聽函數(shù)；

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

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

代碼

先給觸發(fā)元素添加點擊事件

    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)
    }
使用

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84031.html

相關(guān)文章

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

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

    legendmohe 評論0 收藏0

  • Drag&Drop 拖放API簡介以及在React中的實踐

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

    lcodecorex 評論0 收藏0

  • 原生JS快速實現(xiàn)拖放（drag and drop）效果

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

    objc94 評論0 收藏0

  • 原生JS快速實現(xiàn)拖放（drag and drop）效果

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

    arashicage 評論0 收藏0

  • 原生JS快速實現(xiàn)拖放（drag and drop）效果

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

    jzzlee 評論0 收藏0

發(fā)表評論

0條評論

z2xy

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<