js實現(xiàn)拖拽功能
更新時間：2017年03月01日 10:39:29 作者：13751343826
本文主要介紹了js實現(xiàn)拖拽效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：(紅色方塊可任意拖動)
代碼如下：
<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;//計算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)致錯誤
*/
</script>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JS實現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機觸屏滑動)
這篇文章主要介紹了JS實現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機觸屏滑動),需要的朋友可以參考下2017-06-06
cropper.js和exif.js實現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了cropper.js和exif.js實現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript.The.Good.Parts閱讀筆記（二）作用域&閉包&減緩全局空間污染
塊級作用域: 大多數(shù)使用c語言語法的語言都有塊級作用域，而JavaScript沒有塊級作用域。2010-11-11
JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法
這篇文章主要介紹了JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法,結(jié)合實例形式分析了javascript常見的Date()日期時間獲取、轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Sublime Text 3常用插件及安裝方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
js prototype和__proto__的關(guān)系是什么
這篇文章主要介紹了js prototype和__proto__的關(guān)系是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08![使用apply方法處理數(shù)組的三個技巧[譯]](http://img.jbzj.com/images/xgimg/bcimg7.png)
本文要講的是使用apply方法處理數(shù)組的三個技巧，需要的朋友可以參考下2012-09-09
這篇文章主要介紹了javascript編寫實用的省市選擇器的方法及示例分享，非常不錯，推薦給有相同需求的小伙伴們。2015-02-02
這篇文章主要介紹了Swiper.js插件超簡單實現(xiàn)輪播圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03