react 拖拽元件(PC端)

2021-08-28 22:35:22 字數 674 閱讀 6974

簡單封裝了下

import react from 'react'

const addevent = (el, event, handler) => else if (el.addeventlistener) else

};const removeevent = (el, event, handler) => else if (el.removeeventlistener) else

};/*拖拽元件*/

class drag extends react.component

/*定義兩個值用來存放滑鼠按下的地方距離元素上側和左側邊界的值*/

this.disx = 0;

this.disy = 0;

} /*定義滑鼠下落事件*/

fndown = (e) =>

/*定義滑鼠移動事件*/

fnmove = (e) => );

this.props.onmove();

} fnup = () =>

render()

) }}export default drag

使用的話引用下就行

}>

sdsfds

在父元件繫結onmove即可列印出實時的座標

PC端的滑鼠拖拽滑動

1 滑塊拖拽 html div1 js 2 滑鼠滑動滑塊 html class box css box drag drag li js document ready function drag css drag mousedown function e document mousemove func...

元素可拖拽(移動端與pc端)

專案中經常遇到這種需求,特此記錄下 css部分 html部分 js部分 這裡分了兩種情況,因為pc端與移動端的處理情況有點不太一樣 1 pc端 const winw window.innerwidth const winh window.innerheight const target docume...

pc拖拽 實踐

今天搞了個拖拽發現挺多問題,上網找了下,主要是兩個問題 需要在onmousedown和onmousemove新增阻止預設事件,主要是拖拽的預設事件和文字選中的預設事件,還要就是如果頁面有iframe,阻止預設事件沒有作用,需要弄個遮罩。哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或...