<!doctype html>
<html>
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
//引用外部文件时，需要两个参数
// seajs.use('./js/module.js',function(explorts){
// explorts.foo();
// });
window.onload = function(){
var div = document.getElementById('div');
drag(div);
function drag(obj){
obj.onmousedown = function(e){
var that = obj;
var e = e||window.event;
var clientX = e.clientX;
var clientY = e.clientY;
var x = clientX-obj.offsetLeft;
var y = clientY-obj.offsetTop;
// console.log(x+','+y);
document.onmousemove = function(e){
var e = e||window.event;
that.style.left = e.clientX-x +'px';
that.style.top = e.clientY-y +'px';
}
document.onmouseup = function(e){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
<style type="text/css">
#div{
width: 200px;
height: 300px;
position:absolute;
top:100px;
left: 600px;
background-color: red;
}
</style>
<head>
<div id="div">
</div>
</head>
</html>DOM拖拽效果源码
最新推荐文章于 2024-03-27 21:14:28 发布
扫一扫
1608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
