JS實(shí)現(xiàn)簡單拖拽效果
更新時(shí)間：2017年06月21日 08:36:04 作者：catEatBird
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrap {
position: relative;
border: 1px solid #000;
width: 800px;
height: 500px;
}
#drog {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="drog"></div>
</div>
<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
(function(){
var drog = document.querySelector('#drog');
/*
1.記錄按下的時(shí)候的鼠標(biāo)位置
2.記錄按下的時(shí)候元素的位置
*/
drog.onmousedown = function(e){
var startElY = css(drog,"top");
var startElX = css(drog,"left");
var startMouseX = e.clientX;
var startMouseY = e.clientY;
/*
求出鼠標(biāo)移動(dòng)的距離，
操作元素也移動(dòng)相應(yīng)的距離
為了可以一直跟隨，所以添加給document
*/
document.onmousemove = function(e){
var nowMouseX = e.clientX;
var nowMouseY = e.clientY;
var disX = nowMouseX - startMouseX;
var disY = nowMouseY - startMouseY;
var x = disX + startElX;
var y = disY + startElY;
css(drog,"left",x);
css(drog,"top",y);
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
})();
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中如何將字符串轉(zhuǎn)換成數(shù)字
這篇文章主要介紹了javascript中如何將字符串轉(zhuǎn)換成數(shù)字問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了js實(shí)現(xiàn)超簡單的展開、折疊目錄代碼,通過javascript操作鼠標(biāo)點(diǎn)擊事件控制頁面元素樣式的動(dòng)態(tài)改變實(shí)現(xiàn)該功能,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具，本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11
現(xiàn)在微博都有一個(gè)不錯(cuò)的效果就是會實(shí)時(shí)的動(dòng)態(tài)滾動(dòng)并顯示最新的信息了，下面我來給大家介紹仿新浪微博大廳首頁滾動(dòng)效果,希望此方法對大家會有幫助。2015-10-10
layui表格checkbox選擇全選樣式及功能的實(shí)例
下面小編就為大家分享一篇layui表格checkbox選擇全選樣式及功能的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
BootStrap初學(xué)者對彈出框和進(jìn)度條的使用感覺
這篇文章主要介紹了BootStrap初學(xué)者對彈出框和進(jìn)度條的使用感覺的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
ymPrompt的doHandler方法來實(shí)現(xiàn)獲取子窗口返回值的方法
今天在寫頁面時(shí)用到了ymPrompt的win方法來彈出一個(gè)窗口。由于要用到獲取子窗口返回來的值判斷是否刷新父窗口,在ymPrompt的組件Demo中一直沒有找到合適的方法實(shí)現(xiàn)2010-06-06
使用PHP+JavaScript將HTML頁面轉(zhuǎn)換為圖片的實(shí)例分享
這篇文章主要介紹了使用PHP+JavaScript將HTML元素轉(zhuǎn)換為圖片的實(shí)例分享,文后結(jié)果的截圖只能體現(xiàn)出替換的字體,也不能說將靜態(tài)頁面轉(zhuǎn)為圖片可以加快加載,只是這種做法比較interesting XD需要的朋友可以參考下2016-04-04
js調(diào)用CS里的方法有很多，我用一種簡單的方法，如下,有需要的朋友可以參考一下2013-08-08
JavaScript 是一種有趣的語言，我們都喜歡它，因?yàn)樗男再|(zhì)。這篇文章主要介紹了8個(gè)有意思的JavaScript面試題 ,需要的朋友可以參考下2019-07-07