javascript拖动小例子

最新推荐文章于 2024-07-17 09:19:35 发布

lishushan

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量80

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/lishushan/article/details/83531676

版权

JavaScript 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

<html>
　　<head>
　　<meta http-equiv="Content" content="text/html;chartset=utf-8">
　　<title>test drag</title>
　　<style type="text/css">
　　<!--
　　.drag {
　　width:100px;
　　height:100px;
　　position:absolute;
　　left:10px;
　　top:10px;
　　background-color:blue;
　　}
　　-->
　　</style>
　　<script type="text/javascript">
　　<!--
　　function drag(target,event)
　　{
　　 var deltaX = event.clientX-parseInt(target.style.left);
　　 var deltaY = event.clientY-parseInt(target.style.top);
　　 
　　 document.attachEvent("onmousemove",movehandle);
　　 document.attachEvent("onmouseup",uphandle);
　　 function movehandle()
　　 {
　　 target.style.left = event.clientX-deltaX;
　　 target.style.top = event.clientY-deltaY;
　　 }
　　 function uphandle()
　　 {
　　 document.detachEvent("onmousemove",movehandle);
　　 document.detachEvent("onmouseup",uphandle);
　　 }
　　}
　　-->
　　</script>
　　</head>
　　<body>
　　<div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" οnmοusedοwn="drag(this,event);" >show me you 2</div>
　　<div id="drag" class="drag" οnmοusedοwn="drag(this,event);" style="left:10px;top:10px;">show me you</div>
　　</body>
</html>