js拖动原理

简介: js拖动div修正版      var _move = false; var _x,_y; window.onload=function(event){    document.getElementById('layer').

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js拖动div修正版</title>     
<script type="text/javascript"> 
var _move = false; 
var _x,_y; 
window.onload=function(event){ 
   document.getElementById('layer').onmousedown=function(event){ 
   event = event ? event : window.event; 
//判断浏览器类型(针对ie)
   var which = navigator.userAgent.indexOf('MSIE') > 1 ? (event.button == 1 ? 1 : 0) : (event.which == 1 ? 1 : 0) ; 
   if(which) { 
     _move = true; 
     _x = event.clientX - parseInt(document.getElementById('layer').style.left);   
    _y = event.clientY - parseInt(document.getElementById('layer').style.top);  
    }  
  } 
}   

  

document.onmousemove=function(event){ 
  event = event ? event : window.event; 
     if(_move) { 
         var x = event.clientX - _x; 
         var y = event.clientY - _y; 
         document.getElementById('layer').style.left = x+'px'; 
         document.getElementById('layer').style.top = y+'px'; 
     } 
}    


document.onmouseup=function(){ _move = false; } 
</script>    
</head>     
<body> 
<div id="layer" style="position:absolute; width:200px; height:200px; background-color:#3333FF; left:425px; top:134px"></div> 
</body> 
</html>

目录
相关文章
|
1月前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
68 2
|
2月前
|
JavaScript 算法 前端开发
JS垃圾回收机制的原理
JS垃圾回收机制的原理
|
28天前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
18 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
1月前
|
前端开发 JavaScript
JavaScript中的各种循环结构,包括其原理和使用场景
JavaScript中的各种循环结构,包括其原理和使用场景
23 3
|
20天前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
17 0
|
23天前
|
前端开发 JavaScript
前端 JS 经典:图片裁剪上传原理
前端 JS 经典:图片裁剪上传原理
8 0
|
23天前
|
缓存 JavaScript 前端开发
前端 JS 经典:浏览器中 ESModule 的工作原理
前端 JS 经典:浏览器中 ESModule 的工作原理
16 0
|
1月前
|
缓存 自然语言处理 前端开发
深入剖析JavaScript引擎的工作原理
【6月更文挑战第3天】JavaScript引擎由解析器、解释器、优化器和垃圾回收器组成,它们协同完成代码的解析、编译和执行。解析器将源代码转为抽象语法树(AST),编译阶段进行作用域分析和变量提升。解释器执行AST,优化器在代码频繁执行时进行即时编译以提高性能。垃圾回收器自动回收不再使用的内存,防止泄漏。理解这些原理有助于优化代码和提升Web应用性能。
23 1
|
1月前
|
JavaScript 搜索推荐 算法
JS的三种排序方法,它们的原理
JS的三种排序方法,它们的原理
11 0