js實(shí)現(xiàn)拖拽功能
效果圖:(紅色方塊可任意拖動(dòng))
代碼如下:
<meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } body{ background:url("img/2345_image_file_copy_1.jpg"); } #d1{ width:100px; height:100px; background:red; margin-left:300px; } </style> </head> <body> <div id="d1"></div> </body> <script> window.onload=function(){ var d1=document.getElementById("d1"); d1.onmousedown=function(e){ var mouseX=e.clientX; var mouseY=e.clientY;//計(jì)算xy var pianyiX=mouseX-d1.offsetLeft; var pianyiY=mouseY-d1.offsetTop; document.onmousemove=function(e){ var newX=e.clientX-pianyiX; var newY=e.clientY-pianyiY; d1.style.marginLeft=newX+"px"; d1.style.marginTop=newY+"px"; } }; document.onmouseup = function(e){ document.onmousemove = null ; }; } /* 結(jié)果,上面的onmousemove要寫在document上,我寫在div上導(dǎo)致錯(cuò)誤 */ </script> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)可以點(diǎn)擊收縮或張開的懸浮窗
這篇文章主要介紹了js實(shí)現(xiàn)可以點(diǎn)擊收縮或張開的懸浮窗效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09微信網(wǎng)頁(yè)授權(quán)并獲取用戶信息的方法
這篇文章主要介紹了微信網(wǎng)頁(yè)授權(quán)并獲取用戶信息的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08擴(kuò)展Bootstrap Tooltip插件使其可交互的方法
這篇文章主要介紹了擴(kuò)展Bootstrap Tooltip插件使其可交互的方法,結(jié)合實(shí)例形式分析了bootstrap擴(kuò)展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下2016-11-11js 獲取范圍內(nèi)的隨機(jī)數(shù)實(shí)例代碼
下面小編就為大家?guī)硪黄猨s 獲取范圍內(nèi)的隨機(jī)數(shù)實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08詳解JavaScript正則表達(dá)式之分組匹配及反向引用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式之分組匹配及反向引用 的相關(guān)資料,需要的朋友可以參考下2016-03-03基于JS實(shí)現(xiàn)移動(dòng)端訪問PC端頁(yè)面時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)
不想通過CSS自適應(yīng)在PC端和移動(dòng)端分別顯示不同的樣式,那么只能通過在移動(dòng)端訪問PC端網(wǎng)頁(yè)時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)了,那么怎么跳轉(zhuǎn)呢,網(wǎng)上也有很多文章說明,以下實(shí)現(xiàn)思路經(jīng)過小編測(cè)試過,需要的朋友可以參考下2016-04-04IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)硪黄狪ntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09