js實現拖拽的解析(3)
<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top: 0;"></div>
js實現:
var div = document.getElementsByTagName('div')[0]; var disx, disy; div.onmousedown = function (e) { disx = e.pageX - parseInt(div.style.left); disy = e.pageY - parseInt(div.style.top); document.onmousemove = function (e) { var e = e || window.event; console.log(e.pageX + " " + e.pageY) div.style.left = e.pageX - disx + "px"; div.style.top = e.pageY - disy + "px"; } document.onmouseup = function () { div.onmousedown = null; } }
使用函式實現:
function drag(elem) { var disx, disy; addEvent(elem, 'mousedown', function (e) { var event = e || window.event; disx = event.clientX - parseInt(getStyle(elem, 'left')); disy = event.clientY - parseInt(getStyle(elem, 'top')); addEvent(document, 'mousemove', mouseMove); addEvent(document, 'mousemoup', mouseUp); stopBubble(event); cancelHandle(event); function cancelHandle(e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } function stopBubble(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } function mouseMove(e) { var event = e || window.event; elem.style.left = event.clientX - disx + "px"; elem.style.top = event.clientY - disy + "px"; } function mouseUp(e) { var event = e || window.event; removeEvent(document, 'mousemove', mouseMove); removeEvent(document, 'mousemoup', mouseUp); } }) }
相關推薦
js實現拖拽的解析(3)
<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top:
原生js實現React拖拽效果(resize)附帶完整的demo
想找一個可以resize塊的元件,找了好幾天都沒找到合適的。 嘗試過的開源元件: “react-rnd”:被拖拽的塊採用的佈局方式是“position:absolute”,更改佈局的話拖拽的事件會失效,沒有仔細去研究原理。但是我是在不知道這個佈局怎麼去比較好
JS拖拽div(移動)
#dv { width:100px; height:100px; background-color:blue; border-ra
js 利用jquery.gridly.js實現拖拽並且排序
user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
jQuery源代碼解析(3)—— ready載入、queue隊列
else ng- settime eve ref promise ont 出隊 function ready、queue放在一塊寫,沒有特殊的意思,僅僅是相對來說它倆可能源代碼是最簡單的了。ready是在dom載入完畢後。以最高速度觸發,非常實用。que
js實現拖拽
無效 鼠標 sed 添加 知識 方法 tar curl setw 拖拽效果在網站中是很常見的一種效果,其實現原理很簡單,不過其中也隱藏了不少關鍵知識點,比如說焦點丟失問題等。接下來看看具體代碼是怎麽實現的。 css樣式(註意:元素要定位,不然沒有效果) 1 .box {
JS實現拖拽小案例
res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
原生js實現 拖拽事件
ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
Faster RCNN演算法訓練程式碼解析(3)
四個層的forward函式分析: RoIDataLayer:讀資料,隨機打亂等 AnchorTargetLayer:輸出所有anchors(這裡分析這個) ProposalLayer:用產生的anchors平移整圖,裁剪出界、移除低於閾值的的anchors,排序後使用nms,返回頂部排名的anchors
js實現拖拽相容pc端和手機端
pc端拖動時候用到的三個事件:mousedown、mousemove、mouseup 在移動端與之相對應的分別是:touchstart、touchmove、touchend事件。 還有一點要注意的是在PC端獲取當前滑鼠的座標是:event.clientX和event.clientY, 在移動
JavaEE-SSM:006 Mybatis的配置檔案解析(3)
別名主要用於Mapper的xml檔案指定輸入型別或者返回結果型別的名稱的時候,替代全限定名。(前文已經提及如何使用別名) 1.系統級別的typeAlias(類型別名) 2.自定義別名 這裡的alias屬性值得是
React原始碼解析(3):元件的生命週期
元件的生命週期分為二個部分 元件的掛載 元件的更新 元件的掛載 在上一章對於元件的掛載已經做了詳細的說明,但是涉及到元件生命週期部分被略過.接下來我將詳細的對其說明. 元件的掛載涉及到二個比較重要的生命週期方法componentWillMount和componentDidMount. c
【學習筆記】深入理解js原型和閉包(3)——prototype原型
既typeof之後的另一位老朋友! prototype也是我們的老朋友,即使不瞭解的人,也應該都聽過它的大名。如果它還是您的新朋友,我估計您也是javascript的新朋友。 在咱們的第一節(深入理解js原型和閉包(1)——一切皆是物件)中說道,函式也是一種物件。他也是屬性的集合,你也可以
LeNet5的一個MATLAB實現的程式碼解析(6)
MNIST資料集下載:http://yann.lecun.com/exdb/mnist/進網站後點擊紅色的連線就可以下載了。 function [I,labels,I_test,labels_test] = readMNIST(num)%讀取MNIST資料集,這
Memcached原始碼分析-命令解析(3)
#1 流程圖 2 流程說明 1 當進入到conn_read狀態後,會呼叫try_read_network(),將socket資料讀取到conn的rbuf中。 例如:char *rbuf = ‘set key 0 0 4\r\nget name\r\n’。 2
js實現拖拽文字到頁面,讀取文字內容到textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bo
js實現拖拽功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖拽功能&
SlwUi(Super Lightweight UI)前端js外掛菜單系列(3)右鍵選單SlwCtxMenu,導航選單SlwMenu
今天介紹前端js外掛菜單系列(3)右鍵選單SlwCtxMenu,導航選單SlwMenu。 基於jQuery,瀏覽器相容(Browser Support) Internet Explore
LinkedBlockingQueue原始碼解析(3)
此文已由作者趙計剛授權網易雲社群釋出。 歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 4.3、public E take() throws InterruptedException 原理: 將隊頭元素出隊,如果佇列空了,一直阻塞,直到佇列不為空或者執行緒被中斷 使用方法
vue.js實現初了解(一)
call ins mixin gist mpi env 如果 only world 1. vue 2.0是用Flow做靜態類型檢查, 3.0對TypeScript的支持更好了; 2. vue.js是基於Rollup(更輕量,適合js庫的構建)構建的,它的構建相關配置都在s