JS 拖动...

最新推荐文章于 2023-07-07 14:54:07 发布
最新推荐文章于 2023-07-07 14:54:07 发布
阅读量1.3k 收藏
点赞数
分类专栏： js/jquery 文章标签： function xhtml div javascript scroll encoding
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siren0203/article/details/6264860
版权

 

拖拽功能恐怕也是AJAX最明显的特征之一了，之前自己实现过拖拽效果，性能并不好，尤其在IE下的反映，

在网上搜索的时候发现大部分的实现效果都是类似这样的：

（1）         创建mousedown, mousemove, mouseup的监听事件

（2）         在mousemove的监听事件中不断的重置被拖拽元素的left, top值 （性能问题就出在这里）

因为mousemove事件的执行是当鼠标每移动一个像素，就会触发绑定的事件相应函数，而JS操作DOM又是非常耗资源的；

 

 

 

 

 

 

后来看到scriptaculous这个框架（基于prototype.js）实现的拖拽性能非常好，主要是在IE下的反映，

打开代码从一堆源码中找到了一句关键词：setInterval，这个轮询函数将鼠标的移动和被拖拽元素的移动模拟在两个线程上执行，

而且不用在每移动一个像素就对元素的坐标操作一次，这样大大的节省了资源的利用

 

 

贴代码

 

HTML.

 

 

siren0203
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS | 元素拖动
liuj4 | 自娱自乐
09-04 507
确定需要的事件 1. 点击事件: 点击待拖动元素触发，记录下当前鼠标相对于元素的位置dis_x和dis_y，这个距离在拖动的时候是不变的！ 2 . 移动事件：在1中点击事件的基础上，加上鼠标的移动事件，每次移动就先获取鼠标当前相对浏览器的位置cur_x和cur_y，那么元素的当前位置为： 鼠标相对于浏览器的位置 - 鼠标相对于元素的位置 = （cur_x - dis_x，cur_x -...
js拖动事件
yanjin_xiaoxiao的博客
11-14 855
<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖动事件</title> <style> .droptarget { float:left; ...
可拖动的div
huangfeng1982712的专栏
04-02 673
 为了以后方便自己使用，所以先记录起来，方便以后的使用和重构此js是基于prototype和scriptaculous的扩展var DragDiv={};DragDiv.Base=Class.create();;DragDiv.Base.prototype={    initialize:function(element,closeElement,showElement,options){   
element table 表格拖动 sortable.js
qq_53439433的博客
07-07 226
想实现实施拖动改变顺序，用sortable.js 可以完美解决该问题。
sortable.js-拖拽
hellozhxyuan
04-01 1252
官网 1 下载： npm install sortablejs --save 2引入: import Sortable from ‘sortablejs’ 3测试 <template> <div class="flex" id="items"> <div class="item" v-for="(item,index) in value"> <p>{{item.name}}</p> </div>
js.zip_imagetrans.js_javascript 拖动
09-20
本项目“js.zip_imagetrans.js_javascript 拖动”关注的就是这一领域，它结合了JavaScript库`ImageTrans.js`和`CJL.0.1.min.js`，实现了图片旋转、鼠标滚轮缩放以及可拖动的div元素等超炫功能。下面将详细介绍这些...
d3.js实现图形拖拽
10-15
在d3.js库中，实现图形拖拽功能是常用且重要的一部分，用户可以通过编写简单而又灵活的代码来实现这一交互功能。 首先，我们需要了解d3.js的核心概念之一是选择器。通过d3.select()方法，我们可以选择文档中的DOM...
Dropzone.js实现文件拖拽上传实例
03-31
dropzone.js是一个开源的JavaScript库，提供 AJAX 异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单，...
Vue.js devtools 6.5.1
最新发布
04-18
4.拖拽安装：在计算机上找到并双击 Vue.js devtools 6.5.1.crx 文件，然后将它拖拽到 Chrome 扩展管理页面中。或者，你也可以在扩展管理页面中点击 "加载已解压的扩展"，然后选择 Vue.js devtools 6.5.1.crx 文件...
兼容手机和PC的拖拽.rar
12-07
本项目"兼容手机和PC的拖拽.rar"就是针对这一需求，利用dragula.js库实现了一个跨平台的拖放解决方案，确保在桌面和移动设备上都能顺畅地执行拖放操作。 dragula.js是一个轻量级的JavaScript库，专注于提供直观、...
HTML TAG CHECKER/HTML标签检测CHROME插件
热门推荐
斯人博客|PHP高级教程|C++|Javascript
01-20 1万+
HTML中如何快速检查漏掉的闭合标签?
jquery源码分析之扩展函数 extend, $.extend
斯人博客|PHP高级教程|C++|Javascript
04-14 8471
声明：本文为斯人原创，全部为作者一一分析得之，有不对的地方望赐教。 欢迎转载，转载请注明出处 。 本文地址：http://imsiren.com/archives/525 好久没写jquery源码的内容了.. jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于 extend函数 该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.
JS画板
斯人博客|PHP高级教程|C++|Javascript
10-09 2655
收藏http://www.ajaxbbs.net/test/wz_jsgraphics/index.htm 确实很强大  下来研究研究 JS /* This notice must be untouched at all times. wz_jsgraphics
Class.create和 Object.extend继承操作
斯人博客|PHP高级教程|C++|Javascript
12-23 2500
<br /> <br />Prototype在1.6之前的实现一个继承的操作的时候都是采用Object.extend的方式。Object.extend的实现原理是先创建出父类的对象并将子类中的方法复制到这个对象中去，这样做可以比较轻松的实现一个子类到父类的upcasting。但是这样也会存在一个问题，就是子类无法在自己的构造函数中调用父类的构造函数，也就是说无法实现super这样的操作。<br />1.6以前的Object.extend的实现代码:<br />Object.extend = function
js动态给对象加属性
斯人博客|PHP高级教程|C++|Javascript
03-25 2275
<br />最近在忙于公司产品的自定义的一个项目<br /> <br /> <br />js..<br />需要动态加属性..<br />标记下 <br />diy={<br />defaults:{<br />m:[{}]<br />}<br />}<br /> <br />如果要给 diy.default.m数组再加属性..<br /> <br />就得<br />var a=0;<br />var key='abcd';<br />var value=10;<br />eval("diy.defaul
雅虎前端优化14准则
斯人博客|PHP高级教程|C++|Javascript
04-02 1768
<br /><br />1.尽可能使用少的HTTP请求 Make fewer HTTP requests; <br /><br />    这个是很重要的一条，具体措施是使用Image maps  和Inline Images；合并CSS和脚本代码。比如对于Image Maps <br />(服务器端)server-side <br /><a href="navbar.cgi"> <img ismap src="imagemap.gif"> </a>→ http://.../navbar.cgi?127,1
Javascript闭包真经
斯人博客|PHP高级教程|C++|Javascript
12-29 1735
<br />继前阵子写完对象真经后，这篇文章我尝试尽力的去讲透Js中的闭包。这里要感谢爱民，爱民的书写得很好，我从中获益良多。不过这次我打算换一种思路来写这篇真经，就是采用提问回答的方式，我下面先提出我要回答的问题，如果读者你都很自信的能够回答上，那么就可以考虑干别的事情去了。如果感觉自己有点把握不准就请给我一步步的寻址吧。:)我保证最后你就会豁然开朗，明白闭包的真谛。问题集： 什么是函数实例？ 什么是函数引用？ 什么是闭包？ 闭包里有什么玩意？ 函数实例、函数引用和闭包有什么联系？ 闭包的产生
如何扩展JQUERY API
斯人博客|PHP高级教程|C++|Javascript
12-22 1479
<br /><br />扩展JQUERY内部API:两种方法<br />jQuery.extend({<br />    siren:function(){<br />        alert(123)<br />    }<br />})<br />$.extend({<br />    siren:function(){<br />        alert(333)<br />    }<br />})<br /> <br />调用方法是 jQuery.siren();<br /> <br
JQUERY获取 SELECT 选择项的文本内容
斯人博客|PHP高级教程|C++|Javascript
12-13 1460
<br />试了很久才弄出来 <br /> <br />记录下..<br />$("#tid option:selected").text();
Sortable.js拖拽排序实现详解
"Sortable.js是一个强大的JavaScript库，用于实现拖拽排序功能。本文将详细解析Sortable.js的使用方法，包括其核心事件以及基本的DOM操作。虽然Sortable.js的源码大约有1300行，但设计得相当精炼，适用于各种拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值