DoubleLi

qq: 517712484 wx: ldbgliet

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  4737 随笔 :: 2 文章 :: 542 评论 :: 1615万 阅读
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

<!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>

posted on   DoubleLi  阅读(888)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示