純js實(shí)現(xiàn)的積木(div層)拖動功能示例
更新時間：2017年07月19日 10:19:08 作者：caozong
這篇文章主要介紹了純js實(shí)現(xiàn)的積木(div層)拖動功能,結(jié)合實(shí)例形式分析了javascript隨機(jī)生成各種顏色div層及響應(yīng)鼠標(biāo)事件改變元素屬性實(shí)現(xiàn)拖動效果的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了純js實(shí)現(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獲取隨機(jī)數(shù)，獲取隨機(jī)顏色
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){
//鼠標(biāo)到div的距離
objx = even.clientX - obj.offsetLeft;
objy = even.clientY - obj.offsetTop;
//div移動的距離 = 鼠標(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)隨意拖動生成的積木:
更多關(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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)可拖動DIV的方法
- javascript 事件處理、鼠標(biāo)拖動效果實(shí)現(xiàn)方法詳解
- javascript div 彈出可拖動窗口
- JS高級拖動技術(shù) setCapture，releaseCapture
- html+javascript實(shí)現(xiàn)可拖動可提交的彈出層對話框效果
- javascript之可拖動的iframe效果代碼
- JS實(shí)現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實(shí)例
- js通過八個點(diǎn) 拖動改變div大小的實(shí)現(xiàn)方法
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
- JavaScript簡單實(shí)現(xiàn)鼠標(biāo)拖動選擇功能
- js 可拖動列表實(shí)現(xiàn)代碼
- Javascript實(shí)現(xiàn)的類似Google的Div拖動效果代碼
相關(guān)文章
這篇文章主要介紹了微信小程序登錄時如何獲取input框中的內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
p5.js臨摹動態(tài)圖形實(shí)現(xiàn)方法詳解
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹動態(tài)圖形的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家介紹了關(guān)于HTTP?302?Redirect的舉例分析,讓大家理解HTTP?302?Redirect工作原理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-12-12
微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 騰訊地圖SDK 獲取當(dāng)前地址實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JS如何實(shí)現(xiàn)一個單文件組件，對單文件組件感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了談?wù)劄槭裁茨愕?JavaScript 代碼如此冗長，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本文向大家重點(diǎn)講解一下Javascript中split函數(shù)使用，它可以將一個字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回，相信本文介紹你對split函數(shù)的用法有明確的認(rèn)識。2015-04-04
基于layui的table插件進(jìn)行復(fù)選框聯(lián)動功能的實(shí)現(xiàn)方法
今天小編就為大家分享一篇基于layui的table插件進(jìn)行復(fù)選框聯(lián)動功能的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了Javascript writable特性介紹,本文用淺顯易懂的語言講解了writable的特性,需要的朋友可以參考下2015-02-02
javascript宿主對象之window.navigator詳解
這篇文章主要為大家詳細(xì)介紹了javascript宿主對象之window.navigator，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09