純js實(shí)現(xiàn)的積木(div層)拖動(dòng)功能示例
本文實(shí)例講述了純js實(shí)現(xiàn)的積木(div層)拖動(dòng)功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖動(dòng)</title> <style type="text/css"> </style> </head> <body id="content"> <input type="button" value="獲取積木" id="div3"/> </body> <script> //生成積木 document.getElementById("div3").onclick=function(){ var num = getnumber(); var num1 = getnumber(); var num2 = getnumber(); var num3 = getnumber(); var divs = '<div id="s'+num+'"style="width: 200px;height: 200px;position: absolute;background:rgb('+num1+','+num2+','+num3+')"></div>' document.getElementById("content").insertAdjacentHTML("beforeEnd",divs); darg1("s"+num+""); }; //h獲取隨機(jī)數(shù),獲取隨機(jī)顏色 function getnumber(){ return parseInt(Math.random()*255); } //拖動(dòng)積木 function darg1(id){ var obj = document.getElementById(id); var objx = 0; var objy = 0; obj.onmousedown = function(even){ //鼠標(biāo)到div的距離 objx = even.clientX - obj.offsetLeft; objy = even.clientY - obj.offsetTop; //div移動(dòng)的距離 = 鼠標(biāo)到父窗口的距離 - 鼠標(biāo)到div的距離 document.onmousemove = function(even){ obj.style.left = even.pageX-objx+'px'; obj.style.top = even.pageY-objy+'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; }; return false; } </script> <html>
點(diǎn)擊button按鈕,獲取積木,獲取積木后可以在瀏覽器內(nèi)隨意拖動(dòng)生成的積木:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- javascript div 彈出可拖動(dòng)窗口
- JS高級(jí)拖動(dòng)技術(shù) setCapture,releaseCapture
- html+javascript實(shí)現(xiàn)可拖動(dòng)可提交的彈出層對(duì)話框效果
- javascript之可拖動(dòng)的iframe效果代碼
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- js通過(guò)八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動(dòng)效果
- JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
- js 可拖動(dòng)列表實(shí)現(xiàn)代碼
- Javascript實(shí)現(xiàn)的類(lèi)似Google的Div拖動(dòng)效果代碼
相關(guān)文章
JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))
下面小編就為大家?guī)?lái)一篇數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JS實(shí)現(xiàn)點(diǎn)擊鏈接取消跳轉(zhuǎn)效果的方法
有時(shí)候我們僅僅希望將鏈接<a>作為一個(gè)按鈕使用,但是在默認(rèn)狀態(tài)下,點(diǎn)擊鏈接會(huì)出現(xiàn)跳轉(zhuǎn)效果,下面就通過(guò)代碼實(shí)例,介紹一下如何實(shí)現(xiàn)此效果2014-01-01el-select數(shù)據(jù)過(guò)多懶加載的解決(loadmore)
這篇文章主要介紹了el-select數(shù)據(jù)過(guò)多懶加載的解決(loadmore),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)單張或多張圖片持續(xù)無(wú)縫滾動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05PhotoShop給圖片自動(dòng)添加邊框及EXIF信息的JS腳本
這篇文章主要介紹了PhotoShop給圖片自動(dòng)添加邊框及EXIF信息的JS腳本,本文給出效果圖和實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-02-02JavaScript實(shí)現(xiàn)旋轉(zhuǎn)圖像的三種方法介紹
在文檔掃描Web應(yīng)用中,我們需要旋轉(zhuǎn)傾斜的或掃描方向錯(cuò)誤的文檔圖像,這篇文章主要為大家整理了使用JavaScript旋轉(zhuǎn)圖像的三種方法,希望對(duì)大家有所幫助2024-01-01基于jquery插件實(shí)現(xiàn)常見(jiàn)的幻燈片效果
使用幻燈片效果的網(wǎng)站目前很普遍,本以為很復(fù)雜,實(shí)現(xiàn)起來(lái)卻發(fā)現(xiàn)很簡(jiǎn)單,現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實(shí)現(xiàn)幻燈片效果2013-11-11