前端Dom滑鼠點選拖拽

前端時間開發的過程中，遇到乙個滑鼠拖拽dom的需求，這個需求還是十分常見的，與大家一起分享我的想法。

解決這個需求有兩種思路，其中一種是通過h5原生的拖拽事件ondragstart、ondragend，另一種則是通過監聽滑鼠的onmousedown、onmousemove、onmouseup事件。

ondragstart、ondragend詳解

1.首先確認需要被拖拽的dom，在上面加上屬性draggable為true，否則ondragstart和ondragend和ondrag事件都無法生效。

可拖拽元素
<
/div>

.parent

.dragdom

注意： 以下**提供了拖拽的一種寫法思路，不建議直接使用

const

[startx, setstartx]
= usestate(0
);// 元素初始位置
const
[starty, setstarty]
= usestate(0
);// 元素初始位置
let startmou*** =0;
let startmousey =0;
"parent "
>
}  ondragstart=
} ondragend=
// 父級的盒子寬度為800
if(newx >=
(800
- domwidth ))if
(newy <=0)
// 父級的盒子高度為800
if(newy >=
(800
- domheight )
)setstartx
(newx)
setstartx
(newy)}}
>
被拖拽的元件
<
/div>
<
/div>

給父級元素和拖拽元素加樣式，主要是為了定位postion：relative 和position：absolute

在onmousedown中獲取滑鼠的初始位置，並建立onmousemove的監聽和onmouseup的監聽

在onmousemove中，獲取滑鼠的位置，計算出滑鼠與初始位置的位置差，並作出邊界判斷，賦值給元素的位置，

在onmouseup中取消掉onmousemove的監聽

const

[startx, setstartx]
= usestate(0
);// 元素初始位置
const
[starty, setstarty]
= usestate(0
);// 元素初始位置
let startmou*** =0;
let startmousey =0;
"parent "
>
}onmousedown=
if(targety <=0)
if(targetx >= overrigth)
if(targety >= overbottom)
setstartx
(targetx )
setstarty
(targety )};
// 請將mousemove和mouseup放到document上，否則滑鼠移動太快可能會脫節，也就是被拖拽的dom跟不上滑鼠的速度。哈哈
document.
addeventlistener
('mousemove'
, handler,
false);
document.
addeventlistener
('mouseup',(
)=>
,false,)
;}}> 被拖拽元件 <
/div>
<
/div>

獲取滑鼠點選事件

設定觸控模式 node settouchmode cc.touch mode one by one 單點觸控 或者 node settouchmode cc.touch mode all at once 多點觸控 是否啟用觸控 預設值 false node settouchenabled true ...

模擬滑鼠點選事件

今天上12306購票，可被氣得不輕，首先登陸人數受到了限制，其次買到票還有個排隊等待神馬的，先不說裡頭有沒有貓膩，電腦直接操作的，需要等待30分鐘以上嗎？神馬查詢語言要執行30分鐘才能得到個結果出來？贊同網上的言論 相比較而言，之前的搶票更能接受一些 上面是tackbar，用於隨時調整點選的時間間隔...

MFC模擬滑鼠點選

mfc 工程 把以下 放到你想要響應的函式裡面就行 cpoint pt getcursorpos pt 獲取滑鼠在螢幕的當前位置 setcursorpos 100,200 移動到某點座標 mouse event mouseeventf rightdown,0,0,0,0 點下右鍵 mouse eve...