一个可以拖拽的div
2024-10-19 05:30:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
margin:100px;
width: 200px;
height: 200px;
background-color: green;
}
#box:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div id="box"></div>
</div>
<script>
var $box=document.getElementById('box');
var $x,$y;
$box.onmousedown=function(e){
$x=parseInt(e.pageX-parseInt($box.offsetLeft));
$y=parseInt(e.pageY-parseInt($box.offsetTop));
$box.onmousemove=function(e){
$box.style.marginLeft=e.pageX-$x+'px';
$box.style.marginTop=e.pageY-$y+'px';
}
}
window.onmouseup=function(){ $box.onmousemove=null;
}
</script>
</body>
</html>
最新文章
- 用Go语言做产品半年的一些感觉
- Yii 2.x 多主题 - 多语言 配置
- Mybatis关联查询(嵌套查询)
- 获取select标签选中状态 的label的值。
- php字符串处理函数大全
- Linux就这个范儿 第13章 打通任督二脉
- 中国地图 xaml Canvas
- bzoj2096
- Win7如何添加局域网内的网络打印机
- java,spring,tomcat,跨域设置
- 你不知道的 flex 技巧
- HARBOR 仓库 API功能接口
- Python——控件事件
- JavaScript 设计模式的七大原则(未完成)
- 用basicTrendline画一元线性回归直线的置信区间
- 最完整Android Studio插件整理 (转)
- RxJS之Subject主题 ( Angular环境 )
- C#调用接口注意要点
- stingray后端开发
- 使用seek()方法报错:“io.UnsupportedOperation: can&#39;t do nonzero cur-relative seeks”错误的原因