拖動div到指定位置

2021-06-22 18:32:41 字數 1612 閱讀 8266

說明：本功能目的在於拖動目標div到滑鼠指定的位置。

問題：拖動後，獲取滑鼠的位置，然後將div設定為絕對定位並將div的top和left設定為滑鼠的位置，存在這樣的問題：div的左上角和滑鼠位置一致，但是當滑鼠在div內部時，拖動後div的實際位置和我們看到的拖放目標位置不一致。具體如下圖所示

解決方法：

1）在 div物件的ondragstart事件中傳遞如下幾個引數：

ev.datatransfer.setdata("text",ev.target.id);


//獲取div初始位置距離視窗的偏移量


ev.datatransfer.setdata("left",ev.target.offsetleft);


ev.datatransfer.setdata("top",ev.target.offsettop);


//獲取開始拖動時，滑鼠的初始位置


var e = event || window.event; 


var mou*** = e.clientx;


var mousey = e.clienty;


ev.datatransfer.setdata("x1",mou***);


ev.datatransfer.setdata("y1",mousey);



2）在div物件的目標拖動區域物件的ondrop事件中定義如下： 


ev.preventdefault();


var data=ev.datatransfer.getdata("text");


var left = ev.datatransfer.getdata("left");


var top  = ev.datatransfer.getdata("top");


var x1 = ev.datatransfer.getdata("x1");


var y1 = ev.datatransfer.getdata("y1");


var domobj = document.getelementbyid(data);


var h = domobj.clientheight;


var w = domobj.clientwidth;


domobj.style.position = "absolute";


var e = event || window.event; 


var mou*** = e.clientx;


var mousey = e.clienty;


domobj.style.top = top -(y1 - mousey) + "px";


domobj.style.left = left - (x1 - mou***) + "px";


這樣就能將div拖動到指定的位置。如圖所示 

				
MFC 移動控制項到指定位置
方法一 利用movewindow 函式 crect rectbutton getdlgitem idc store getwindowrect rectbutton 獲取idc store控制項的位置座標 screentoclient rectbutton rectbutton.offsetrect...

				
點選定位到指定位置 伺服電機定位的入門介紹
在之前的幾篇文章中我們講述了伺服電機閉環原理的定位伺服電機閉環原理的定位 伺服電機編碼器的解析度伺服電機編碼器的解析度 伺服驅動器電子齒輪比的設定方法伺服驅動器電子齒輪比的設定方法，這幾個問題了明白後，今天我們來具體說說如何使用伺服電機實現定位功能。首先我們需要設定伺服驅動器的控制模式為位置模式，採...

				
C   std  vector指定位置插入
使用vector，必須加上 include 1.初始化vector，一般有這幾種方式 std vectorv1 建立乙個空的wstring型別的vector std vectorv2 3,l c 建立乙個容量為3，全部初始化l c std vectorv3 5 建立容量為5，資料型別為int的vec...