html5实现拖拽功能 dataTransfer

2024-11-04

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其这个对象到底包含了哪些玩意. FQ出去问了下谷歌找到了DataTransfer的API,下面就介绍一下: DataTransfer 拖拽数据传递对象,一般使用方式event.dataTransfer. dataTransfer . dropEffect [ = value ] 拖拽效果,可选值:“n

html5中的拖拽功能

拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 ondragend 应用于拖拽元素,当拖拽结束时调用目标元素支持的事件 ondragenter 应用于目标元素,当拖拽元素进入时调用 ondragover 应用于目标元素,当停留在目标元素上时调用 ondrop 应用于目标元素,当在目标元素上松开鼠标时调用 ondragleave 应用于目标元素,当鼠

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不

html5 文件拖拽上传

本文首先发表在码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来. 功能实现下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现. 首先会介绍一些必须的基础. 拖拽事件拖拽事件有下面这些: dragstart:当用户开始拖动对象时触发. dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发.此事件

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge

JQuery UI的拖拽功能实现方法小结

JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

RCP：拖拽功能的实现 Drag and Drop

SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽的Control DropTarget封装了拖拽的目标Control,即是拖拽终点的容器 Transfer是一个转换器,用于Java表示和平台指定的数据之间的相互转换根据以上,我们可以揣测: 1.只有被DragSource封装了的Control对象才能被拖拽 2.只有被DropTarget封装了的

js实现登陆页面的拖拽功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } .dialog{ width: 380px;

duilib中控件拖拽功能的实现方法（附源码）

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际使用过程中拖拽功能也是有用武之地的.看群里有人问题duilib怎么支持拖拽,我也就写这篇文章说明一下duilib实现控件拖拽的方法. 当我刚接触duilib不就的时候,考虑过duilib拖拽这个功能,当时的想法是,在xml布局中设置一个浮动的控件,正常状态下他是隐藏的,当出发了拖拽条件后将他显示并且

React Editor 应用编辑器(1) - 拖拽功能剖析

这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页文档流布局,绝对定位同时支持对插入的任何 React 组件都可以直接作为编辑元素拖拽到页面中兼容 React-Native 的 web 组件可以让它生成 android 和 ios 原生页面拥有 Gaea-Preview 套件,传入 Gaea-Editor 生成的 json,可以立刻生成页面拥有 Ga

DIV 实现可拖拽功能（留档）

//可拖拽功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 jqDrag: function () { var _drag = false, _self, _x, _y, cw, ch, sw, sh, dragBar, DragCnt, vxw = window, vxd = document, vxe = vxd.documentE

使用NGUI实现拖拽功能（拼图小游戏）

上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的方法即可 public class DragOnPic : UIDragDropItem { protected override void OnDragDropStart () { base.OnDragDropStart (); } protected override void OnDragD

使用UGUI实现拖拽功能（拼图小游戏）

实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragHandler using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class DragOnPic : MonoBehaviour,IBeginDragHandler, IDragHan

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能并没有处理这些细节,经过翻阅 jquery ui 的源码才找到答案. 拖拽实现关于拖拽功能不再啰嗦,直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle [拖拽元素] */ var

关于 JS 拖拽功能的冲突问题及解决方法

前言我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文主要介绍解决这种冲突的方法,主要是事件绑定的时机问题. 问题来源这个问题是在类似如下 CodePen 例子中发现的,在有拖拽功能的页面中添加一个原生 input range 元素,可以发现 input range 的拖拽失效了. See the Pen drag with conflict iss

FLEX类似谷歌地图拖拽功能

要实现类似于谷歌地图拖拽功能,可以用s:Scroller标签来实现,代码如下: mxml: <s:Scroller width="100%" height="100%" interactionMode="touch" skinClass="skins.ScrollerSkin"> <s:Group> <component:Diagram id="diagram"> <

Js元素拖拽功能实现

Js元素拖拽功能实现需要解决的问题最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取消和确认按钮都被挡住了. 拖拽的原理及实现首先将元素设置为绝对定位,还用到鼠标的三个事件(mousedown.mousemove和mouseup),当用户按下鼠标触发mousedown事件设置被拖拽的元素为拖拽对象,然后移动鼠标连续触发mousemove事件,判断拖拽对象不为空时重新设置拖拽对象的

vuejs2.0使用Sortable.js实现的拖拽功能

简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果实现后的效果如图所示:

基于html5可拖拽图片循环滚动切换

分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="site-wrapper"> <section id="section-header" data-coloroverlap="dark"></section> <section id="second-phase&qu

WPF实现拖拽功能

技术点:WPF的Behaviors实现了对象的行为附加,Microsoft.Expression.Interactions程序集中包含了若干Behaviors,其中MouseDragElementBehavior可以实现对象拖拽行为的附加,从而实现对象的拖拽功能. 代码如下: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.

html5实现拖拽功能 dataTransfer

热门专题