专业网站建设咨,怎么查看一个网站页面的seo优化情况,wordpress婚庆主题,黑客零基础入门前言 拖放#xff08;drap drop#xff09;在我们平时的工作中#xff0c;经常遇到。它表示#xff1a;抓取对象以后拖放到另一个位置。目前#xff0c;它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 拖放的流程对应的事件 我们先看下拖放的流程drap drop在我们平时的工作中经常遇到。它表示抓取对象以后拖放到另一个位置。目前它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 拖放的流程对应的事件 我们先看下拖放的流程 选中 --- 拖动 --- 释放 然后我们一步步看下这个过程中会发生的事情。 选中 在HTML5标准中为了使元素可拖动把draggable属性设置为true。 文本、图片和链接是默认可以拖放的它们的draggable属性自动被设置成了true。 图片和链接按住鼠标左键选中就可以拖放。 文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true按住鼠标左键也可以直接拖放。 draggable属性设置元素是否可拖动。 语法element draggabletrue | false | auto true: 可以拖动false: 禁止拖动auto: 跟随浏览器定义是否可以拖动拖动 每一个可拖动的元素在拖动过程中都会经历三个过程拖动开始--拖动过程中-- 拖动结束。 针对对象事件名称说明被拖动的元素dragstart在元素开始被拖动时候触发drag在元素被拖动时反复触发dragend在拖动操作完成时触发目的地对象dragenter当被拖动元素进入目的地元素所占据的屏幕空间时触发dragover当被拖动元素在目的地元素内时触发dragleave当被拖动元素没有放下就离开目的地元素时触发dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此我们必须阻止浏览器这种默认行为。e.preventDefault(); 释放 到达目的地之后释放元素事件 针对对象事件名称说明目的地对象drop当被拖动元素在目的地元素里放下时触发一般需要取消浏览器的默认行为。选中拖动释放例子 !DOCTYPE HTML
htmlheadtitle拖放示例-文本/title
/head
style
.src {display: flex;
}.dropabled {flex: 1;
}.txt {color: green;
}.img {width: 100px;height: 100px;border: 1px solid gray;
}.target {width: 200px;height: 200px;line-height: 200px;text-align: center;border: 1px solid gray;color: red;
}
/stylebodydiv classsrcdiv classdragableddiv classtxt idtxt所有的文字都可拖拽。p draggabletrue此段文字设置了属性draggabletrue/p /divdiv classurl idurla hrefhttp://weiqinl.com target_blank我是url:http://weiqinl.com/a/divimg classimg idtupian1 srcimg1.png alt图片1 /img classimg idtupian2 srcimg2.png alt图片2 //divdiv idtarget classdropabled targetDrop Here/div/divscriptvar dragSrc document.getElementById(txt)var target document.getElementById(target)dragSrc.ondragstart handle_startdragSrc.ondrag handle_dragdragSrc.ondragend handle_endfunction handle_start(e) {console.log(dragstart-在元素开始被拖动时候触发)}function handle_drag() {console.log(drag-在元素被拖动时候反复触发)}function handle_end() {console.log(dragend-在拖动操作完成时触发)}target.ondragenter handle_entertarget.ondragover handle_overtarget.ondragleave handle_leavetarget.ondrop handle_dropfunction handle_enter(e) {console.log(handle_enter-当元素进入目的地时触发)// 阻止浏览器默认行为e.preventDefault()}function handle_over(e) {console.log(handle_over-当元素在目的地时触发)// 阻止浏览器默认行为e.preventDefault()}function handle_leave(e) {console.log(handle_leave-当元素离开目的地时触发)// 阻止浏览器默认行为// e.preventDefault()}function handle_drop(e) {console.log(handle_drop-当元素在目的地放下时触发)var t Date.now()target.innerHTML target.append(t -拖放触发的事件。)e.preventDefault()}/script
/body/html drag-drop事件触发 在整个拖放过程中我们以上说的是表面现象事件过程内部还会发生什么事情呢请看下面?的DataTransfer对象。 DataTransfer对象 与拖放操作所触发的事件同时派发的对象是DragEvent它派生于MouseEvent具有Event与MouseEvent对象的所有功能并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息返回DataTransfer对象。 // DataTransfer dataTransfer DragEvent.dataTransfer DataTransfer对象定义的属性和方法有很多种我们看下列入标准的几个。 属性说明types只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。IE10、Edge、safari3.1、Firefox3.5 和Chrome4以上支持该属性files返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件此属性是一个空列表。dropEffect获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。effectAllowed指定拖放操作所允许的效果。必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性方法说明void setData(format, data)将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型String getData(format)返回指定格式的数据format与setData()中一致void clearData([format])删除给定类型的拖动操作的数据。如果给定类型的数据不存在此方法不执行任何操作。如果不给定参数则删除所有类型的数据。void setDragImage(img, xOffset, yOffset)指定一副图像当拖动发生时显示在光标下方。大多数情况下不用设置因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量//IE10及之前版本不支持扩展的MIME类型名
//Firefox 5版本之前不能正确的将url和text映射为text/uri-list 和text/plain
var dataTransfer event.dataTransfer;
//读取文本
var text dataTransfer.getData(Text);
//读取URL,
var url dataTransfer.getData(url) || dataTransfer.getData(text/uri-list); drag-drop-dataTransfer各属性方法示例 浏览器支持程度 说了这么多如果浏览器不支持也是白扯。 Method of easily dragging and dropping elements on a page, requiring minimal JavaScript. 要求最少的js实现拖拽页面元素的简单方法 drag之浏览器支持程度--caniuse note dataTransfer.items 只有Chrome支持dropzone属性目前没有浏览器支持Firefox支持.setDragImage任何类型的DOM元素。Chrome必须有HTMLImageElement或者任何DOM元素该DOM元素附加到DOM 和浏览器的.setDragImage视口(viewport)内。 1.部分支持是指不支持dataTransfer.files 或者 .types对象 2.部分支持是指不支持.setDragImage 3.部分支持是指dataTransfer.setData / getData 的有限支持格式以下我在实际中遇到的情况各浏览器对标准的实现还是有差异的。 getData()在chrome 62.0浏览器中只能在drop事件中生效。如果使用setDragImage方法指定的图像不存在则拖动过程 safari 11.0.1 浏览器只会触发dragstart和dragend事件。chrome、opera 和 Firefox会正常触发其他事件。每一次拖放操作Firefox都会执行一次新开一个页面的动作并且自动搜索dataTransfer.getData()得到的内容。 解决方法在drop事件中添加 e.stopPropagation();// 不再派发事件。解决Firefox浏览器打开新窗口的问题。opera 49版本中链接默认不可以拖动必须把draggable属性设置为true才可以拖动。关于 dropEffect 和 effectAllowed 。 effectAllowed 允许拖放操作的效果最多不会超过那么几种。dropEffect 设置拖放操作的具体效果只能是四种可能之一。如果effectAllowed设置为none则不允许拖放元素。但是各个浏览器能触发的事件不一样。注意safari可以拖放元素而且会触发所有事件如果dropEffect设置为none则不允许被拖放到目的地元素中。如果设置了effectAllowed的值那么如果要设置dropEffect的值其值必须和effectAllowed的值一致否则拖动效果无效而且不允许将被拖放元素放到目的地元素中。(注safari11.0.1有效果而且也能拖动到目的地元素中但是这不符合标准)。示例 drag-drop-dataTransfer各属性方法示例drag-drop事件触发 总结 原生HTML5拖拽APIdrag drop 在实际工作中还是有很多情况下会遇到的。 以上我只介绍了部分常用API。API不复杂多看会儿实践就知道了。各个浏览器可能会在表现上稍有不同但我相信大家还是会向着标准发展的。 转载于:https://www.cnblogs.com/weiqinl/p/7886049.html
