博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单的drag和drop,不是jquery的draggable
阅读量:7221 次
发布时间:2019-06-29

本文共 1050 字,大约阅读时间需要 3 分钟。

1  var dragging = false;  2  var test;  3  var mouseY;  4  var mouseX;  5   6   window.onload = function()  7   {      8    test = document.getElementById("idname");  9    test.onmousedown = down; 10    test.onmousemove = move; 11    document.onmouseup = up; 12    test.style.position = "relative"; 13    test.style.top = "0px"; 14    test.style.left = "0px"; 15   } 16   17   function down(event) 18   { 19    event = event || window.event;  20    dragging = true;  21    mouseX = parseInt(event.clientX); 22    mouseY = parseInt(event.clientY); 23    objY = parseInt(test.style.top); 24    objX = parseInt(test.style.left); 25   } 26   function move(event) 27   { 28    event = event || window.event;  29    if(dragging == true) 30    {  31     var x,y;  32     y = event.clientY - mouseY + objY;  33     x = event.clientX - mouseX + objX;  34     test.style.top = y + "px";  35     test.style.left = x + "px"; 36    } 37   } 38   function up() 39   { 40    dragging = false; 41   }

 

转载于:https://www.cnblogs.com/mount/archive/2011/12/09/2281503.html

你可能感兴趣的文章
一次和前端的相互甩锅的问题记录
查看>>
纯OC实现iOS DLNA投屏功能了解一下
查看>>
RxJava -- fromArray 和 Just 以及 interval
查看>>
LC #75 JS
查看>>
js正则验证代码库
查看>>
常见面试题—css实现垂直水平居中
查看>>
lc682. Baseball Game
查看>>
重学前端-css选择器
查看>>
iOS开发之扫描二维码
查看>>
Android黑科技: 快速找到view所在的xml文件
查看>>
linux分区方案
查看>>
003-Java技术体系
查看>>
超轻量模板引擎
查看>>
JavaScript 复习之 Object对象的相关方法
查看>>
JAVA之流程控制语句
查看>>
Spring Boot(1)
查看>>
Winodws 10 美化与调优
查看>>
apache安装及多域名解析及域名代理
查看>>
什么是自动化运维 ? 自动化运维的设计思路以及实战
查看>>
Python练习实例100例(持续更新中)
查看>>