<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽的封装</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; } img{ position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); var oImg = document.getElementById("img1"); drag( oDiv); drag( oImg);//封装拖拽函数drag; function drag(obj){ obj .onmousedown = function(ev){ var ev = ev||event; var disX = ev.clientX-this.offsetLeft; var disY = ev.clientY-this.offsetTop; if(obj.setCapture){ obj.setCapture(); }
拖拽方法的封装
最新推荐文章于 2024-08-05 14:51:38 发布
本文介绍了如何使用JavaScript封装一个拖拽功能,通过监听鼠标事件,计算鼠标与元素的相对位置,实现在页面上拖动元素的效果。示例中包含了对div和图片的拖拽操作。
摘要由CSDN通过智能技术生成