dataTransfer.dropEffect设置为copy

2024-11-04

HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象

[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象之前的一篇文章中也有提及到dataTransfer对象,那会只是想通过dataTransfer对象来将被拖拽元素的id进行传递,使得目标元素可以通过相应的dataTransfer对象来获取id进行对应操作. 成员表属性描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. effect

Objc中为何某些类的属性要设置为copy而不是strong?

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 不知道大家是否注意,我们再使用一些第三方类的时候大多数情况下对象属性的type都是strong,但是某些类却设置成了copy类型,这是为什么? 看似很细小的改变其实是有其用意的. copy和strong之间的区别很清楚,前者只是直接引用一个对象,而后者却是引用一个对象的拷贝. 比如如下示例: #import <UIKit/UIKit.h> @interfac

HTML5-CSS3-JavaScript(3)

我们就从HTML5的基础总结起.希望可以提高自身的基础. HTML5 头部和元信息使用 <head.../> 元素可以定义HTML文档头,该元素可以包含如下子元素. <script> 该元素用于包含JavaScript脚本. <style> 该元素用于定义内部CSS样式. <link> 该元素用于链接外部CSS样式等资源. <title> 该元素用于定义文档标题.该元素较为常用的属性时id,作为其唯一标识.该元素只能包含文本内容,该文本内容

DataTransfer对象的一些总结

所有元素都支持防止目标事件,但是这些元素默认是不允许释放的,如果拖动元素经过不允许放置的元素无论用户如何操作,都不会触发drop事件,不过可以把任何元素变成有效的放置目标.方法是重写dropenter和droppover的默认行为: <input id="moveSrc" value="我要被移动到红色div中去"></input> <div id="moveTarget" style="width:100

dataTransfer对象

HTML5拖拽的数据传输虽然通过dragstart.drag和dragend事件实现了原生拖拽.但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换.为了实现数据的交换,IE5引入了dataTransfer对象.dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据.因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象.在事件处理程序中,可以使用这个对象的属性和方法来完善拖放功能. dat

JS中dataTransfer对象在拖曳操作中的妙用。

转载原文 https://my.oschina.net/jiangli0502/blog/179197 dataTransfer对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. 通俗的讲就是在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作. 对象属性 dropEffect:设置或返回拖放目标上允许发生的拖放行为.如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败.

HTML5拖拽功能中 dataTransfer对象详解

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

dataTransfer 对象

dataTransfer 对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. DHTML元素属性列表属性描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. effectAllowed 设置或获取数据传送操作可应用于该对象的源元素. 方法描述 clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式. getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获

什么时候用copy什么时候用retain (一)

在声明一个property的时候总是搞不清什么时候用retain,什么时候用copy,用上去了感觉也不会错,但是又没有安全感: Copy:顾名思义,复制,将对象复制一份,ios内部的操作时,先copy出一份新的对象,然后销毁旧的,新的对象引用计数为1: retain:中文含义为保留,ios内部是,释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的索引计数为1: 言下之意:Copy是内容复制:retain是内存地址复制: 注意: 例: @property (nonatomic, copy)

深入理解javascript原生拖放

× 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标前面的话拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放拖放源什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默

HTML5 Drop API

转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀三.HTML4下实现简单拖拽四.HTML5下实现简单拖拽五.如何启用DnD效果六.draggable属性详解七.DnD的生命周期八.DnD中最重

three.js全景

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - equirectangular panorama</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala

[转]html5表单上传控件Files API

表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量允许选择多个文件:<input type="file" multiple> 只允许上传一个文件:<input type="file" single> 2.上传指定的文件格式 <input type="file" accept="im

JS获取剪贴板图片之后的格式选择与压缩问题

前言某年某月的某一天,突然发现博客服务器上上传的图片都比较大,一些很小的截图都有几百kb,本来服务器带宽就慢,不优化一下说不过去. 问题细述特别说明:本文代码因为只是用于我自己后台写markdown上传图片,运行环境只考虑PC,所以没有考虑任何兼容性,推荐Chrome下使用. 以下面一张图片为例: 原始图片为85kb,jpg格式的,上传之后就变成png格式了,而且变成了560kb!实在是说不过去! 我的代码大致如下: // $('.editor')为markdown编辑区 $('.edito

HTML5魔法堂：全面理解Drag & Drop API

一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀三.HTML4下实现简单拖拽四.HTML5下实现简单拖拽五.如何启用DnD效果六.draggable属性详解七.DnD的生命周期八.DnD中最重要的数据传递对象──DataTransfer对象九.[object DataTransferItemLi

开大你的音响，感受HTML5 Audio API带来的视听盛宴

话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候,我们默认是把IE排除在外的.本文的例子可以工作在最新的Chrome及Firefox浏览器下,其他浏览器暂未测试. 若下方未出现演示页面请刷新. 你也可以点此全屏演示或者前往GitHub进行代码下载然后本地运行. 你还可以下载示例音乐(如果你手头没有音频文件的话) 文件列表:bb

关于HTML5的拖拽

不介绍具体情况,先看API,注意看后面括号的说明 dragstart:拖拽开始(应用于被拖拽对象) drag:拖拽中(应用于被拖拽对象) dragenter:拖拽到指定位置(应用于拖拽目标) dragleave:拖拽离开指定位置(应用于拖拽目标) dragover:拖拽在指定位置(应用于拖拽目标) drop:在指定位置释放(应用于拖拽目标) dragend:拖拽结束(应用于被拖拽对象) 事件描述目标 dragstart 开始拖对象时触发被拖动对象 dragenter 当对象第一次被拖动到目

HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 80px; } #fir{background-color: blue; } #sec{backgroun

MVC5：使用Ajax和HTML5实现文件上传功能

引言在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能高级功能:通过拖拽文件的操作实现多个文件上传功能背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的“读

HTML5与移动端web学习笔记

HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等用于绘画的 Canvas 元素用于多媒体播放的 video 和 audio 元素用于定位的 Geolocation API 本地存储以及离线应用 Web Workers.Web WebSocket API 移动前端开发可分为: 手机网页开发.这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webkit的天

dataTransfer.dropEffect设置为copy

热门专题