html5拖拽缺点,html5拖拽总结

拖拽(Drag 和 drop)是 HTML5 标准的组成部分。拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

DataTransfer 对象

退拽对象用来传递的媒介,使用一般为Event.dataTransfer。

被拖元素:

ondragstart(开始拖拽)

function drag(ev) {

ev.dataTransfer.setData("Text",ev.target.id);

}

ondrag(拖拽中)

ondragend(拖拽结束)

投放区:

ondragenter(进入投放区)

ondragleave(离开投放区)

ondragover(拖拽到何处)

若不阻止默认事件,则无法将元素放置到投放区。 阻止默认事件e.preventDefalut();

ondrop(投放事件)   浏览器对元素默认以链接形式打开。

阻止默认:e.preventDefalut();

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

Html5拖拽复制

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

html5拖拽

html5拖拽一

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

基于html5拖拽api实现列表的拖拽排序

基于html5拖拽api实现列表的拖拽排序 html代码:

HTML5拖拽实例

最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

html之div拖拽,html5拖拽

html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

iOS 琐碎点------切某个或某几个角的圆角

不说废话----------> 1.如果是切四个角的圆角,代码示例: self.picImage.layer.cornerRadius = 8; self.picImage.layer.mask ...

Web(Jsp+ Servlet)开发中如何解决中文乱码问题

1.中文乱码的成因 编码的字符集和解码的字符集不一致. 2.web开发过程中可能出现的乱码的位置及解决方案 ①request乱码 在向服务器传递数据时,所传递的中文有可能出现乱码. post请求(协议 ...

RecyclerView局部刷新那点事

1.局部刷新的引入 提到RecyclerView,我们首先想到的是ListView,对于ListView的局部刷新,我们之前已经有解决方案,[android:ListView的局部刷新]当时的解决方案 ...

利用 word2vec 训练的字向量进行中文分词

最近针对之前发表的一篇博文中的算法做了一个实现,感觉效果还不错.本文主要是将我在程序实现过程中的一些数学细节整理出来,借此优 ...

Struts2配置详解_配置Action

Struts2的核心功能是action,对于开发人员来说,使用Struts2主要就是编写action,action类通常都要实现com.opensymphony.xwork2.Action接口,并实现 ...

java基础之Java变量命名规范

本文介绍的是java中的变量的命名规则,对于初学者来说,还是很重要的.希望对你有帮助,一起来看. Java是一种区分字母的大小写(case-sensitive)的语言,下面谈谈Java语言中包.类.变 ...

『零行代码』解决键盘遮挡问题(iOS)

关注仓库,及时获得更新:iOS-Source-Code-Analyze https://github.com/draveness/iOS-Source-Code-Analyze Follow: Dra ...

hdu 1885 Key Task(bfs+状态压缩)

Problem Description The Czech Technical University years of its existence . Some of the university b ...

NMON监控工具

工具可将服务器的系统资源耗用情况收集起来并输出一个特定的文件,并可利用 excel 分析工具nmonanalyser进行数据的统计分析.并且,nmon运行不会占用过多的系统资源,通常情况下CPU利用率 ...

海量数据挖掘MMDS week2: 频繁项集挖掘 Apriori算法的改进:基于hash的方法

http://blog.csdn.net/pipisorry/article/details/48901217 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5功能可以通过JavaScript来实现。下面是一个简单的示例,可以用来制作一个简单的点菜单: HTML代码: ```html <div id="menu"> <div class="item" draggable="true" ondragstart="drag(event)">Item 1</div> <div class="item" draggable="true" ondragstart="drag(event)">Item 2</div> <div class="item" draggable="true" ondragstart="drag(event)">Item 3</div> </div> <div id="cart" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>Cart</h2> </div> ``` JavaScript代码: ```javascript function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var item = document.getElementById(data); var cart = document.getElementById("cart"); cart.appendChild(item); } ``` 在上面的示例中,我们创建了两个div元素,一个用于菜单,一个用于购物车。我们还为菜单项添加了一个属性“draggable”,并为其添加了一个事件处理程序“ondragstart”,该事件处理程序将数据存储在数据传输对象中。 在购物车div上,我们还添加了两个事件处理程序:“ondrop”和“ondragover”,它们分别用于处理放事件和允许元素放到该元素上。 最后,我们还定义了三个函数:allowDrop(允许放置),drag(动)和drop(放置)。这些函数分别处理动操作和放置操作。 当用户将一个菜单项动到购物车div上时,drop函数将被调用。该函数通过数据传输对象获取动的元素,并将其添加到购物车div中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值