正文

原生js实现拖动功能

卷柏的花期  卷柏的花期  2022-08-02  426

关键词：

代码：

 1 function drag(id){
 2 
 3     var obj = document.getElementById(id),
 4         resultX = 0,
 5         resultY = 0;
 6 
 7     function getPos(t){
 8         var offsetLeft = 0,
 9             offsetTop = 0,
10             offsetParent = t;
11 
12         while(offsetParent){
13             offsetLeft+=offsetParent.offsetLeft;
14             offsetTop+=offsetParent.offsetTop;
15             offsetParent = offsetParent.offsetParent;
16         }
17 
18         return {‘top‘:offsetTop,‘left‘:offsetLeft};
19     }
20 
21     function core(){
22 
23         var width = document.body.clientWidth || document.documentElement.clientWidth,
24             height = document.body.clientHeight || document.documentElement.clientHeight;
25             maxWidth = width - obj.offsetWidth,
26             maxHeight = height - obj.offsetHeight;
27 
28         (resultX >= maxWidth)?  obj.style.left = maxWidth+‘px‘ :  obj.style.left = resultX +‘px‘;
29         (resultY >= maxHeight)?   obj.style.top = maxHeight +‘px‘ : obj.style.top = resultY +‘px‘;
30 
31         obj.onmousedown=function(e){
32             var e = e || window.event,
33                 coordX = e.clientX,
34                 coordY = e.clientY,
35                 posX = getPos(obj).left,
36                 posY = getPos(obj).top;
37 
38             obj.setCapture && obj.setCapture();
39             document.onmousemove=function(e){
40 
41                 var ev = e || window.event,
42                     moveX = ev.clientX,
43                     moveY = ev.clientY;
44 
45                 resultX = moveX - (coordX - posX);
46                 resultY = moveY - (coordY - posY);
47 
48                 (resultX > 0 )?((resultX < maxWidth)?obj.style.left = resultX+‘px‘ : obj.style.left = maxWidth+‘px‘) : obj.style.left = ‘0px‘; 
49                 (resultY > 0 )?((resultY < maxHeight)?obj.style.top = resultY+‘px‘ : obj.style.top = maxHeight+‘px‘) : obj.style.top = ‘0px‘; 
50 
51             };
52         };
53         document.onmouseup=function(){
54             document.onmousemove = null;
55             obj.releaseCapture && obj.releaseCapture();
56         };
57         obj.onmouseup=function(e){
58             var e = e || window.event;
59             document.onmousemove = null;
60             obj.releaseCapture && obj.releaseCapture();
61         };
62     }
63     core();
64     window.onresize = core;
65 }

使用方式：

1 drag(‘box‘);

原生js实现弹出窗口的拖拽（直接copy可用）

...可以使用，效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式，如下：　　思路：拖动这个操作起始分为三个部分：鼠标左键按下，此时才开始可以拖动；鼠标移动，拖动开始；根据光标的移动给div相对应的... 查看详情

可拖动弹窗，原生js实现code

复制代码，可直接运行查看效果，关键处已注释说明，希望对你有所帮助。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>可拖动弹窗</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/ 查看详情

原生js-实现拖动模态框效果(代码片段)

前言：效果虽丑，但是主要考查的是对pageX，pageY和offset属性的掌握。效果代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title>< 查看详情

原生js实现拖动拉开序幕特效(代码片段)

给大家分享一个用原生JS实现的拖动拉开序幕特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"c... 查看详情

原生js实现拖动拉开序幕特效(代码片段)

原生js实现百度搜索功能

今天呢给大家分享一下自己用原生JS做的一个百度搜索功能，下面上代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="shortcuticon"href="https://www.baidu.com/favicon.ico"type=" 查看详情

原生js实现vue组件功能

...情况下，我们一直在惊叹于VUE的组件的功能，却不知道，原生js早就已经支持了这个功能。最近在公开课学到的，js还有很多很多需要探索学习。下面是一个简单的例子<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title... 查看详情

原生js实现购物车相关功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>实现购物车的相关功能</title><style>*{margin:0;padding:0;}table{width:600px;border-collapse:collapse;}th,t 查看详情

原生js实现table表格的各行变色功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>原生js实现各行变色</title><style>*{margin:0;padding:0;}#studentCore{width:300px;margin:0auto;}table{bor 查看详情

原生js实现简易评论更新功能

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#outside{width:1000px;margin:0auto;border:1pxsolid#E7EAEE;overflow:hidden; 查看详情

原生js实现ajax的文件异步提交功能图片预览功能.实例

<%--CreatedbyIntelliJIDEA.User:yhDate:2016/12/14Time:17:13TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@includef 查看详情

vue+mousemove实现拖动，鼠标移动过快拖动就失效(代码片段)

今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：只能慢... 查看详情

原生js实现购物车功能

html<divclass="catbox"><tableid="cartTable"><thead><tr><th><label><inputclass="check-allcheck"type="checkbox">  全选</label></th>& 查看详情

原生js实现一个简单的倒计时功能

　　大家好，我是云中君！欢迎大家来观看我的博客之前那，在群里看到很多人问，关于电商网站中的倒计时功能怎么实现，很多人说在网上找了很多插件，但是不是很会用，所以今天就在这里分享一下我封装的一个小的倒计时... 查看详情

原生js实现简易atm功能(代码片段)

简易ATM题目描述：里面现存100块钱。如果存钱，就用输入的钱数加上先群的钱，然后弹出余额。如果取钱，就减去取的钱，然后显示余额。如果显示余额，就显示余额。如果退出，就进行判断再退出。<script>varmoney=100;varmoneyS... 查看详情

添加拖动功能以使用clndr.js从日历中选择多个（范围）日期(代码片段)

...-ui可拖动但是任何人都可以通过这个来演示或指导我如何实现这个功能或者它是否可以通过CLNDR.js本身。任何帮助将非常感激。答案所以我通过使用jquery拖放实现了这一点。只要单击其中一个框，我就会向其添加某个类并添加拖... 查看详情

实现 MKPinAnnotationView 拖动功能？

】实现MKPinAnnotationView拖动功能？【英文标题】：ImplementingMKPinAnnotationViewdragfeature?【发布时间】：2012-12-1015:04:33【问题描述】：谁能推荐一个很好的教程来为iPhoneMKMapView中的MKPinAnnotationView实现拖动功能？【问题讨论】：重复：***... 查看详情

vue+element拖动排序功能(代码片段)

...了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧!这功能肯定不会手撸了,直接上插件使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.　　教程地址:https://blog.csdn.net/IT_HLM/article/detai... 查看详情