学习
实践
活动
专区
工具
TVP
写文章

彻底搞懂拖拽——基于鼠标事件拖拽以及基于HTML5 API的拖拽完整实现

一、基于鼠标事件拖拽 原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件HTML标签: , < JavaScript对象: 默认情况下,onmousemove不是任何对象的事件,因为鼠标移动非常频繁 onmouseup 该事件会在鼠标按键被松开时触发 支持该事件HTML标签: < 至此使用鼠标事件拖拽大功告成! ---- 二、基于HTML5拖拽API的拖拽 前序知识介绍   一个典型的拖拽操作是这样的:用户用鼠标选中一个可拖动的(draggable)元素,移动鼠标到一个可放置的(droppable)元素,然后释放鼠标 接口: HTML5为所有的拖动相关事件提供了一个新的属性: 源对象和目标对象的事件间传递数据 ev.dataTransfer {}//数据传递对象 源对象上的事件处理中保存数据:

1.8K30
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js事件高级:拖拽

    什么是拖拽 拖拽就是在某一个对象上,当鼠标按下去之后,拖着对象走,松开鼠标时,对象位置变成拖拽的位置 简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时,会停留在边缘 实现代码 <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style > 实现效果 完美拖拽_吸附 1.在实现简单拖拽的基础上给拖拽对象一个区域范围 2.拖拽吸附:在靠近父级边缘时自动吸附在父级边缘 实现代码 <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style > 实现效果 带框拖拽 带框拖拽拖拽的另一种形式,拖动时,跟着移动的是对象的虚线框,虚线框就是对象将要拖移到达的位置 实现代码 <!

    19120

    HTML5拖拽

    @(HTML5)[HTML 5拖拽] HTML 5 拖拽事件 图片自带拖拽功能 其他元素可设置draggable属性:draggable :true 拖拽元素(被拖拽的元素)事件 : ondragstart : 拖拽的一瞬间触发 ondrag : 拖拽前、拖拽结束之间,连续触发 ondragend : 拖拽结束触发 目标元素(拖拽元素被拖到的地方)事件 : ondragenter 进入目标、离开目标之间,连续触发 ondragleave : 离开目标元素触发 ondrop :在目标元素上释放鼠标触发 默认状态下,一个元素不能放另一元素的上面,需要在ondragover事件里面阻止默认事件 , link, linkMove, move, all 和 uninitialized) setDragImage : 三个参数(指定的元素,坐标X,坐标Y) files: 获取外部拖拽的文件 filesList列表 filesList下有个type属性,返回文件的类型 FileReader(读取文件信息) readAsDataURL 参数为要读取的文件对象 onload当读取文件成功完成的时候触发此事件

    1.3K10

    【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    为什么学习HTML5? 咳咳, 回到主题,为什么我们要学HTML5呢? 在操作期间,会触发一系列的拖放类型的事件 其中我们主要关心的事件有三个: 1. ondragstart 发生在可拖拽(draggable)的元素上, 在元素被拖动的时候调用 2. ondragover 发生在可放置(droppable)的元素上, 当某被拖动的对象在可放置对象范围内(上方)时触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发 如何使得被拖拽元素可拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置? 拖拽后 ? 参考资料: HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】

    70730

    【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件

    为什么学习HTML5? 咳咳, 回到主题,为什么我们要学HTML5呢? 在操作期间,会触发一系列的拖放类型的事件 其中我们主要关心的事件有三个: 1. ondragstart 发生在可拖拽(draggable)的元素上, 在元素被拖动的时候调用 2. ondragover 发生在可放置(droppable)的元素上, 当某被拖动的对象在可放置对象范围内(上方)时触发此事件 3. ondrop  发生在可放置(droppable)的元素上,当释放鼠标使可拖拽元素“放进”可放置元素内的瞬间触发 如何使得被拖拽元素可拖拽?(因为元素默认的行为是不可拖拽的),以及如何使得被放置的容器元素可放置? 拖拽后 ? 参考资料: HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】 ?

    839100

    HTML DOM - 事件

    事件作出反应 当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。 如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中: onclick=JavaScript HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 在本例中,当用户点击时,会改变

    元素的内容: 实例 <h1 onclick="this.innerHTML </h1> <em>HTML</em> <em>事件</em>属性 如需向 <em>HTML</em> 元素分配<em>事件</em>,您可以使用<em>事件</em>属性。 ---- 使用 <em>HTML</em> DOM 来分配<em>事件</em> <em>HTML</em> DOM 允许您使用 JavaScript 向 <em>HTML</em> 元素分配<em>事件</em>: 实例 为 button 元素分配 onclick <em>事件</em>: document.getElementById

    19430

    HTML5 拖拽上传图片实例

    因为标题写的是实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来的,参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久有效 ,如果失效请在文章最后点击demo下载):http://hoorayos.caifutang.com/dropupload.html   界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文 ,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传,另外的就是添加网络图片。 它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图:   拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台 主要实现代码是从“功能实现”开始的,这块具体为何这样操作,原理是什么,我就不多说了,大家可以参考下这篇文章:《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata

    18630

    HTML属性及事件

    HTML属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现 如:class=”a” 不同属性之间用“空格”隔开 HTML属性和属性值之间用 可在工具提示中显示) translate 指定是否一个元素的值在页面载入时是否需要翻译 name 规定元素的名称 value 规定元素的值 href 规定超链接元素的链接地址 target 规定网页的打开方式 HTML 事件 窗口事件 属性 描述 onafterprint 在打印文档之后运行脚本 onbeforeprint 在文档打印之前运行脚本 onbeforeonload 在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 HTML 5 不支持。 onselect 当选取元素时运行脚本 onsubmit 当提交表单时运行脚本 键盘事件 属性 值 onkeydown 当按下按键时行脚本 onkeypress 当按下并松开按键时运行脚本 onkeyup

    56520

    HTML事件属性--DOM

    研究html的对象,事件和方法,从js的角度来思考,这个标签的属性是通过什么方法,触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件 } </script> 打印前和打印后的事件方法类似,一个是在打印前触发事件,一个是在打印这个事件结束之后触发onafterprint这个事件 demo查看 2.onbeforeunload/unload } 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur /鼠标释放时触发的事件 一个是按下去的瞬间就触发 一个是当鼠标被松开的时候触发 onmouseup效果和onclick一样,因为click也是点击过后触发 这两个事件加起来相当于一个click事件,但是并不能用这两个事件来做点击事件的效果 document.getElementById('ci').innerHTML = x += 1 } </script> 这个案例---滑动滚动计数 demo查看 区别: 1.wheel在滚轮滑动的时候有效,鼠标拖拽的时候无效

    16820

    html文本框鼠标离开事件,html鼠标事件_文本框事件「建议收藏」

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 今天57号网络技术分享给大家介绍html鼠标事件,就是当前文本框获得焦点时,里面的原有文本清零。 xhtml1-transitional.dtd”> xmlns=”http://www.w3.org/1999/xhtml”> http-equiv=”Content-Type” content=”text/html width:300px; height:40px; line-height:40px; float:left; text-align:center;} function cls(){ //捕获触发事件的对象 并设置为以下语句的默认对象 with(event.srcElement) //如果当前值为默认值,则清空 if(value==defaultValue) value=”” } function res(){ //捕获触发事件的对象 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/204280.html原文链接:https://javaforall.cn

    19720

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 事件总线

      事件总线

      腾讯云事件总线(EB)是一款安全,稳定,高效的无服务器事件管理平台,支持腾讯云服务、自定义应用、SaaS应用以标准化、中心化的方式接入,帮助您轻松实现无服务器事件驱动架构。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券