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