`
liudaoru
  • 浏览: 1586303 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

拖动效果相关js知识点【整理】

    博客分类:
  • Ajax
阅读更多

 object.setCapture() 当一个object的被 setCapture 后,他的方法将会被继承到整个文档进行捕获。
  当不需要把方法继承到整个文档捕获时,要用 object.releaseCapture()

   Mozilla 也有类似的功能,方法稍微不同
  window.captureEvents(Event.eventType)
   window.releaseEvents(Event.eventType)

Event 是Mozilla特殊的一个object.
eventType 包括: Abort, Blur, Click, Change, DblClick, DragDrop, Error, Focus, KeyDown, KeyPress, KeyUp, Load, MouseDown, MouseMove, MouseOut, MouseOver, MouseUp, Move, Reset, Resize, Select, Submit, Unload.

=====================

1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。
2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
3.       event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
4.       releaseCapture() 释放当前文档中对象的鼠标捕捉。
5.       scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
6.       scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

======================

http://www.cnblogs.com/cmalaya/archive/2007/05/29/764339.aspx

js 代码
  1. <script type="text/javascript">   
  2. <!--   
  3. window.onload=function(){   
  4.   objDiv = document.getElementById('drag');   
  5.   drag(objDiv);   
  6. };   
  7.   
  8. function drag(dv){   
  9.   dv.onmousedown=function(e){   
  10.       var d=document;   
  11.       e = e || window.event;   
  12.          
  13.       var x= e.layerX || e.offsetX;   
  14.       var y= e.layerY || e.offsetY;   
  15.          
  16.       //设置捕获范围   
  17.       if(dv.setCapture){   
  18.           dv.setCapture();   
  19.       }else if(window.captureEvents){   
  20.           window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);   
  21.       }   
  22.          
  23.   
  24.       d.onmousemove=function(e){   
  25.            e= e || window.event;   
  26.            if(!e.pageX)e.pageX=e.clientX;   
  27.            if(!e.pageY)e.pageY=e.clientY;   
  28.            var tx=e.pageX-x;   
  29.            var ty=e.pageY-y;   
  30.               
  31.            dv.style.left=tx;   
  32.            dv.style.top=ty;   
  33.       };   
  34.   
  35.       d.onmouseup=function(){   
  36.            //取消捕获范围   
  37.            if(dv.releaseCapture){   
  38.               dv.releaseCapture();   
  39.            }else if(window.captureEvents){   
  40.               window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);   
  41.            }   
  42.               
  43.           //清除事件   
  44.           d.onmousemove=null;   
  45.           d.onmouseup=null;   
  46.       };   
  47.    };   
  48. }   
  49. //-->   
  50. </script>   
  51.   
  52. --------   
  53. <div id="drag" >drag me <div>   
  54.   
分享到:
评论

相关推荐

    js 模拟手机桌面,拖拽、合并文件、换位置

    在这个场景中,我们关注的核心知识点是“拖拽”、“合并文件”和“换位置”,这些都是构建此类应用的关键技术。接下来,我们将深入探讨这些概念。 一、拖拽(Drag and Drop) 拖拽功能在Web应用中广泛用于模拟现实...

    各种JS绚丽效果各种JS绚丽效果各种JS绚丽效果

    以上所述的知识点涵盖了JS在创建绚丽效果时常用的技术和应用场景。在实际开发中,往往结合现有的JS库和框架,如jQuery、React、Vue等,来简化代码并增强功能。"封装好的JS+效果图"可能是指这些效果已经被开发者整理...

    基于vue实现一个禅道主页拖拽效果

    在介绍如何基于Vue实现禅道主页拖拽效果时,首先需要了解几个核心知识点:Vue、vuedraggable插件、Flex布局以及组件的配置方法。 Vue是一种用于构建用户界面的渐进式JavaScript框架。它将用户界面抽象为组件,允许...

    原生js实现可拖动的登录框效果

    由于文档中的代码部分被OCR扫描识别错误和漏识别,我将基于提供的信息和知识点进行整理和解释。 ```html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***"&gt; ***"&gt; ;charset=utf-8"/&gt; 可...

    javascript 公用拖拽类代码

    首先,文件中包含的内容不是很连贯,但是我们可以通过文本中出现的关键信息,推测并整理出相关知识点。 知识点: 1. JavaScript拖拽功能的实现原理和基本用法。 - JavaScript中的拖拽操作主要是通过监听特定的事件...

    Javascript框架Script.aculo.us的英文文档

    ### JavaScript框架Script.aculo.us知识点概述 #### 一、简介 Script.aculo.us是一个功能强大的JavaScript库,专注于提供丰富的用户界面交互效果与控制组件。它最初是为Ruby on Rails项目设计的,但其灵活的设计使...

    JS课程XMind.rar_jsxmind -baijiahao_js总结xmind_xmind web开发_xmind前端js

    JavaScript主要知识点包括: 1. 变量与数据类型:JavaScript有七种数据类型,包括基本类型(字符串、数字、布尔、null、undefined)和引用类型(对象、数组、函数)。 2. 控制结构:如条件语句(if...else)、循环...

    百度地图接口文档整理

    百度地图接口文档整理主要包括以下几个知识点: 1. 百度地图JsApi基础使用方法: - 注册秘钥,创建应用。 - 获取秘钥后,在应用中配置IP,通过script标签引入百度地图的JsAPI。 - 使用引入的JsAPI,创建最简单的...

    基于jquery的一个拖拽到指定区域内的效果

    在描述中提到,作者经过两天的努力,对这个特效的各方面进行了深入研究,并最终整理出了一套实现拖拽到指定区域效果的特效。 ### 知识点详解 #### 1. jQuery与拖拽效果 要实现拖拽效果,通常会用到jQuery的几个...

    30组常用前端开发组件库,前端组件收集整理列表.docx

    以下是一些从标题、描述和标签中提取出的前端开发相关知识点的详细说明: 1. **前端构建工具**: - **Gulp**:Gulp是一个基于流的构建系统,允许开发者通过简单的任务配置来自动化构建流程,如CSS编译、压缩、图片...

    多个经典的js版的组织结构图

    JavaScript(简称JS)是一种广泛应用于Web开发的轻量级编程语言,它在创建动态网页、交互式用户界面以及实现各种复杂功能方面具有显著优势。在本主题中,我们将深入探讨如何利用JavaScript来创建组织结构图,这是一...

    js表单效验.txt

    根据给定文件的信息,我们可以总结出关于JavaScript表单...以上就是基于给定文件信息整理出的JavaScript表单验证相关知识点。通过这些技术手段,开发者可以有效地对用户的输入数据进行校验,确保数据的有效性和安全性。

    ext整理的一些知识

    根据给定的文件信息,以下是对C#与Ext.NET中几个关键知识点的深入解析: ### 1. 下拉框的数据展示优化 在Ext.NET中,为了实现下拉框在获取焦点时主动显示数据的功能,可以通过在下拉框的监听事务(Listener)中...

    H5小游戏整理

    学习这些H5小游戏,你可以深入理解以下知识点: 1. **HTML5元素**:了解如何使用`&lt;canvas&gt;`进行绘图,以及如何嵌入音频和视频。 2. **JavaScript基础**:掌握变量、条件语句、循环、函数等基本概念,以及DOM操作。 ...

    js-ShanGuiGu:学习JavaScript尚硅谷课程的个人学习笔记

    这份"js-ShanGuiGu"笔记可能详细记录了上述知识点的学习心得和实践案例,是作者在学习过程中的宝贵资料,也是其他人复习或入门JavaScript的好帮手。通过阅读这样的笔记,可以快速理解和掌握JavaScript的核心概念,...

    javascript 开发之百度地图使用到的js函数整理

    ### 知识点:JavaScript开发之百度地图使用到的JS函数整理 #### 1. 百度地图JavaScript API简介 百度地图JavaScript API是一套支持网页地图功能开发的API,它允许开发者在网页中嵌入地图,并利用JavaScript编程...

    整理过的GRID综合应用

    "整理过的GRID综合应用"这个主题涵盖了多个关键知识点,包括但不限于表头表尾的处理、数据导入导出、多层嵌套、分页等。下面将详细阐述这些概念。 1. **表头表尾处理**:在GRID中,表头通常用于显示列名,表尾可能...

    分享jQuery网页元素拖拽插件

    根据提供的文件内容,...需要注意的是,文档的内容可能因为OCR扫描的原因存在部分字词识别错误或漏识别,但核心知识点基本可以理解并整理出来。在实际应用时,还需对具体代码进行调试和优化以确保最佳性能和用户体验。

    JQuery 国际象棋棋盘 实现代码

    通过以上的知识点整理,可以看出文档中包含着实现国际象棋棋盘的基础技术细节和编程实践,同时也反映了一个开发者的成长和学习过程。这些知识点不仅适用于国际象棋棋盘的实现,对于任何涉及棋类游戏编程的开发者来说...

    table列排序、列拖动、列宽度变化、行交换

    下面我们将详细探讨这些知识点。 首先,**表头列排序**是一种常见于数据表格的功能,允许用户按照一列或多列的数据进行升序或降序排列。这通常通过点击表头来触发,后台根据排序条件对数据进行处理,然后重新渲染...

Global site tag (gtag.js) - Google Analytics