HTML中拖放介绍

1.在jQuery UI里面会经常使用Draggable和Droppable,实现Web开发中拖放效果,当然这不是原生条的拖放,所以在处理复杂的拖放上还是需要自己动手写很多代码,最近开发中就遇到这个问题。拖放的广泛用途:文件管理、数据传输、图标绘制和其他许多操作。个人觉得在列表文件,比如树形菜单上用的比较多。但是这里的拖放和iphone上的触摸(touch)滑动还不完全一样,这里的拖放可能是用鼠标操作,但是触摸滑动主要是通过手指之类的。没有具体开发过mobile web应用,不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。

Web拖放发展历史

第一阶段:

因为HTML和DOM可以处理底层的鼠标事件,所以早起的开发人员可以借助Javascript和CSS,DOM事件基础,可以近似实现一个简单的拖放功能。需要在Web页面拖放元素,需要使用到下面的方法,大多数是和鼠标有关的事件

事件

说明

备注

mousedown

用户按下鼠标开始操作

需要判定是拖放还是单击?

mousemove

如果鼠标没有松开,则是移动操作

需要判定拖动还是选择?

mouseover

鼠标移动到了每个元素上

放置在哪个元素上面

mouseout

鼠标移除了某个元素,此元素不再是

可放置的元素 需要为用户给出提示吗?

mouseup

释放鼠标按键,可能会触发放置操作

基于鼠标起始位置,是否放置在此位置

弊端:

1.需要考虑边界,而已需要提示哪里位置可以放置元素

2.不能将自己的页面的元素与其他页面,或者窗口、浏览器中其他内容合并或者交互

3.无法与用户的桌面交互,也无法跨浏览器窗口

第二阶段:

大家觉得用DOM和Javascript事件处理拖放操作很复杂,所以就有很多公司使用Flash去完成这个任务。所以可以看到很多拖放文件上传工具使用了flash去上传,业务逻辑上又复杂的拖放操作也都交给了flash去完成。毕竟flash在动画交互方面还是很有优势的。

第三阶段:

HTML5发布之后,技术越来越成熟。而已标准中提供了拖放的API,所以越来越多的公司关注HTML5中拖放操作。看一个Skydrive上传文件的示例和Dropbox上传文件的示例。

Skydrive没有给出具体的提示,表示用户拖放文件到页面就可以上传,但是我们可以用这个方法上传文件。Dropbox提示了用户,可以拖放文件到页面然后上传上去。截图如下:

因为没有具体查看代码,不知道这2家公司是否也是使用了HTML5的Drag API,同时没有去测试对较老的浏览器的支持,所以不知道他们是使用的哪种技术。

参考网址:

http://jqueryui.com

http://www.prohtml5.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

Vue.js 极简教程jsfiddle Hello World 例子:参考资料:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

2051
来自专栏程序员叨叨叨

Mac使用小技巧

许多从windows转向Mac的童鞋们都会感觉鼠标的滚动方向不习惯,这里告诉大家如何修改鼠标滚动方向:

701
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。...

35310
来自专栏Golang语言社区

go语言 tcp通信例子

go 的tcp的应用层代码看起来极为简单 1,多个协程同时Accept , 不知道这种实现有没有什么问题 2,多个协程同时处理网络IO事件, 貌似意味着, 有多...

43016
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1825
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

1194
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

6643
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

5707
来自专栏24K纯开源

Qt Style Sheet实践(二):组合框QComboBox的定制

导读      组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能...

7267
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

1863

扫码关注云+社区

领取腾讯云代金券