备案控制台
学习
实践
活动
专区
工具
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应用以标准化、中心化的方式接入，帮助您轻松实现无服务器事件驱动架构。

    相关资讯

    热门标签

    更多标签

    活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 京公网安备 11010802017518 粤B2-20090059-1

    扫码关注腾讯云开发者

    领取腾讯云代金券