`
yiminghe
  • 浏览: 1460576 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript 拖放实现的要点

阅读更多

Drag And Drop


1. 定义一个拖放对象 A


2.监控 A 的 onmousedown 事件 ,记录当前拖放对象,拖放开始

 

3.当拖放开始时 ,监控 document 的 onmousemove  onmouseup 事件

 

4. 当 onmousemove  事件触发时 ,将当前事件的坐标位置 改变 当前拖放对象 的位置

 

5. 当 onmouseup 事件触发时 ,取消 监控 document 的 onmousemove  onmouseup 事件

 

细节包括 : ie,ff 位置计算的差异

                 鼠标和拖放对象的相对位置等

 

 

ps: 附件 是 一个 网上实现比较好的 例子

分享到:
评论

相关推荐

    NET AJAX拖放引擎内部机制分析.pdf

    总的来说,理解.NET AJAX Futures CTP中的拖放引擎内部机制需要掌握以下几个要点:1) 拖放引擎的基本要素——可拖放项和投放区;2) DragDropManager对象的角色和管理机制;3) IDragSource和IDropTarget接口的实现,...

    JavaScript30天挑战

    8. **Day 25 - 拖放排序**:深入理解拖放API,实现一个可以排序列表的拖放功能。 每个主题都包含一个简短的视频教程,详细解释了当日任务的技术要点,并提供了一个初始的HTML/CSS/JS文件结构,学习者需要根据指导...

    javascript 特效 学习它的好教材

    下面将详细介绍JavaScript特效的学习要点。 一、JavaScript基础 在深入学习特效之前,首先要掌握JavaScript的基础知识。这包括变量、数据类型、运算符、流程控制(如if语句、for循环、while循环)、函数以及对象等...

    【JavaScript源代码】vue实现桌面向网页拖动文件的示例代码(可显示图片音频视频).docx

    在Vue.js中实现桌面向网页拖放文件的功能,可以极大地提升用户体验,特别是对于那些...以上就是使用Vue.js实现桌面向网页拖放文件功能的关键步骤和技术要点。注意,实际应用中可能需要根据项目需求进行适当调整和优化。

    JavaScript and AJAX For Dummies

    第十二章介绍了jQuery UI工具包的使用,这是一个强大的库,提供了一系列预定义的UI组件,如拖放功能、日期选择器等,可以帮助开发者快速构建高质量的用户界面。 **13. 用jQuery改善用户体验** 第十三章讲解了如何...

    基于JS实现带表情图片可修改kindEditor编辑器特效源码.zip

    【标题】"基于JS实现带表情图片可修改kindEditor编辑器特效源码"涉及的核心知识点是前端开发中的富文本编辑器实现,特别是如何利用JavaScript语言和特定库——KindEditor,来创建一个支持表情图片和自定义功能的编辑...

    这个是js实现图片拖拽交换位置的功能代码案例

    在JavaScript中实现图片拖拽并交换位置的功能是一项常见的交互设计...以上就是使用JavaScript实现图片拖拽交换位置功能的主要步骤和技术要点。理解并掌握这些知识点,开发者就能够创建出流畅、用户友好的图像管理界面。

    Ext拖动实例树和表格全

    在Ext JS中,实现拖放功能的核心在于继承并实现特定的类,如`DragSource`和`DropTarget`。 #### 2.1 DragSource - **定义**: `DragSource`类提供了基本的拖动功能。 - **使用**: 通过继承`DragSource`类并重写其...

    javascript日历插件

    本插件通常由JavaScript代码编写,结合HTML和CSS实现,提供丰富的自定义选项和易于使用的API接口。 1. **基础原理**: JavaScript日历插件利用浏览器的JavaScript引擎来动态生成和更新HTML元素,以展示日历界面。...

    HTML期末学生大作业-节日网页作业html+css+javascript

    例如,可以通过JavaScript实现轮播图、下拉菜单、表单验证等功能。 4. **DIV+CSS布局**: DIV+CSS布局是现代网页设计中的常用技术,它可以帮助学生更好地组织网页内容,使得页面结构更清晰,同时也有利于SEO优化。 ...

    jQuery-UI和jsPlumb实现拖拽连接模型demo下载

    本篇文章将详细讲解如何利用这两个工具实现拖拽连接模型,并探讨其背后的原理和技术要点。 首先,jQuery-UI是jQuery的一个扩展库,提供了丰富的UI组件,如日期选择器、滑块、对话框等。它基于jQuery核心库,简化了...

    428_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip

    JavaScript是实现网页动态交互的关键,它允许网页与用户进行实时互动,比如表单验证、动画效果和异步数据加载等。在这个"428"项目中,可能包含了一些JS库或框架,如jQuery、React、Vue等,用于简化开发流程并提升...

    JQuery 拖拽插件

    jQuery,一个轻量级且强大的JavaScript库,为开发者提供了实现拖放操作的便利。本文将详细介绍如何使用jQuery实现拖拽插件,以及其背后的原理和技术要点。 ### 一、jQuery UI与Draggable插件 jQuery UI是一个完整...

    Apress.Pro.Android.Web.Apps.Developing.HTML5.JavaScript.CSS.and.Chrome.OS.Web.Apps

    - 实现拖放功能、滑动效果等交互设计。 **7. 基于位置的服务与移动地图** - **介绍**:随着地理位置信息的重要性日益凸显,越来越多的Web应用开始集成基于位置的服务。 - **技术栈**:通常利用Google Maps API等...

    《网站全程设计技术》课程自学计划.pptx

    自学要点可能涉及AJAX(异步JavaScript和XML)技术,用于实现无刷新的数据更新。 第七章《JavaScript语言特效》进一步深入JavaScript,可能讲解如何创建动态效果,如滑动、淡入淡出和拖放功能。 第八章《利用ASP...

    jQuery+html5拖拽上传图片预览代码.zip

    本篇文章将详细解析一个基于jQuery和HTML5的图片拖拽上传并预览的实现方案,通过分析项目中的`index.html`、`images`、`js`和`css`等文件,来深入理解这一技术的核心要点。 一、HTML5拖放API HTML5引入了拖放...

    jQuery鼠标上下拖动div排序代码.zip

    总的来说,"jQuery鼠标上下拖动div排序代码.zip"提供了一套完整的实现方式,让开发者能够轻松地在网页中实现div元素的拖放排序功能。通过深入理解jQuery、Sortable插件以及相关的HTML和CSS,开发者可以灵活地将此...

Global site tag (gtag.js) - Google Analytics