成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡單實(shí)現(xiàn)元素可拖動(dòng)的效果

z2xy / 572人閱讀

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

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

需求說明

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

實(shí)現(xiàn)思路

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

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

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

代碼

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

    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)用這個(gè)函數(shù)，將兩個(gè)元素:觸發(fā)拖動(dòng)的元素和被拖動(dòng)的元素， 傳進(jìn)函數(shù)就可以了
PS:被拖動(dòng)的元素需要設(shè)置絕對(duì)定位：position: absolute;

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84031.html

相關(guān)文章

  • 使用 Drag and Drop 給Web應(yīng)用提升交互體驗(yàn)

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

    legendmohe 評(píng)論0 收藏0

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

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

    lcodecorex 評(píng)論0 收藏0

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

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

    objc94 評(píng)論0 收藏0

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

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

    arashicage 評(píng)論0 收藏0

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

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

    jzzlee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<