首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

draggable和ondragstart的区别

draggable和ondragstart是HTML5中用于实现拖拽功能的两个相关属性和事件。

  1. draggable属性:
    • 概念:draggable属性是HTML元素的一个布尔属性,用于指定元素是否可拖拽。
    • 分类:属于HTML5的拖放API。
    • 优势:通过设置draggable属性,可以轻松地实现元素的拖拽功能,提升用户交互体验。
    • 应用场景:常见的应用场景包括拖拽排序、拖拽上传、拖拽创建任务等。
    • 腾讯云相关产品:腾讯云对象存储(COS)可以用于存储拖拽上传的文件,详情请参考腾讯云对象存储(COS)
  2. ondragstart事件:
    • 概念:ondragstart事件是在拖拽操作开始时触发的事件,通常与draggable属性一起使用。
    • 分类:属于HTML5的拖放API。
    • 优势:通过监听ondragstart事件,可以在拖拽开始时执行自定义的操作,如设置拖拽数据、修改拖拽样式等。
    • 应用场景:常见的应用场景包括拖拽时显示半透明效果、拖拽时显示自定义的拖拽图标等。
    • 腾讯云相关产品:腾讯云云服务器(CVM)可以用于处理拖拽操作触发的后端逻辑,详情请参考腾讯云云服务器(CVM)

综上所述,draggable属性用于指定元素是否可拖拽,而ondragstart事件则是在拖拽操作开始时触发的事件。它们可以一起使用,通过设置draggable属性和监听ondragstart事件,实现元素的拖拽功能,并且可以根据具体需求进行自定义操作。在腾讯云中,腾讯云对象存储(COS)可以用于存储拖拽上传的文件,腾讯云云服务器(CVM)可以用于处理拖拽操作触发的后端逻辑。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript进阶之实现拖拽

注意 ball.ondragstart = function() { return false; }; 如果不设置这段代码,会发生奇怪现象,这是因为浏览器有自己对图片一些其他元素拖放处理,...一个典型drag操作是这样开始:用户用鼠标选中一个可拖动draggable)元素,移动鼠标到一个可放置(droppable)元素,然后释放鼠标。...draggable 属性:就是标签元素要设置draggable=true ondragstart 事件:当拖拽元素开始被拖拽时候触发事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素时候触发事件...draggable="true" ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart...有 3 个效果可以定义: copy 表明被拖动数据将从它原本位置拷贝到目标的位置。 move 表明被拖动数据将被移动。 link 表明在拖动源位置目标位置之间将会创建一些关系表格或是连接。

2.6K40

JavaScript 学习-50.实现页面菜单拖放(Drag Drop)

拖放(Drag Drop) 在拖曳操作中,被拖曳元素称做源对象,是指页面中设置了draggable=”true”属性元素;源对象进入元素称作目标元素,目标元素可以是页面的任一元素。...把元素设置为可拖放首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true: 需要注意是,图片链接默认是可以拖曳,它不用添加draggable...拖放内容 - ondragstart setData() 然后,规定当元素被拖动时发生事情。...该方法将返回在 setData() 方法中设置为相同类型任何数据 被拖数据是被拖元素 id (“drag1”) 把被拖元素追加到放置元素中 使用示例 一个完整拖曳效果是由拖曳(Drag)释放(Drop...)组成,在HTML 5中任何元素都能够实现拖曳操作,可以通过为元素添加属性draggable=’true’ 来实现, 在拖曳操作中,被拖曳元素称做源对象,是指页面中设置了draggable=”true

1.1K20

HTML5 拖放

一、什么是拖放(Drag drop)? 拖放(Drag drop)在WEB软件应用中是一种常见操作,就是用户可以用鼠标点击对象以后拖到另一个位置。...,这些模块摆放一般有一个初始默认位置,各种角色管理员可以根据自己喜好来将这些模块按照自己习惯进行拖动摆放 在HTML5 之前,我们要想实现针对页面中标签元素 移动拖放,没有一个统一操作标准...不必去了解为什么这样,因为就是这样设计: 1、设置元素为可拖放 为了使某个元素可拖动,我们给他添加 draggable 属性,并且把 draggable 属性设置为 true : 2、设置要拖动内容(ondragstart setData()) 设置当元素被拖动时,要拖动内容是什么;这里需要给要拖动元素添加 ondragstart事件(当元素开始用鼠标拖动时...="true" ondragstart="drag(event)" /> function drag(ev) { //设置被拖数据数据类型值 ev.dataTransfer.setData

1.5K20

HTML5 - 拖放

使用 preventDefault() 取消事件默认动作 拖放事件 拖动元素-事件: 事件 描述 ondragstart 当元素开始被拖动时触发——开始拖动 ondrag 拖动源触发——正在拖动...dataTransfer对象 属性/方法 描述 files 其属性返回放置相关所有文件 types 属性使用数组形式返回当前注册格式 effectAllowed 此属性通知浏览器当前可被用户选用操作.../zh-CN/docs/Web/API/DataTransfer 先来看个小例子 需要注意是,想要让元素可拖动,必须把该元素 draggable 属性设为 “true” 才允许拖动。...true" id="demo"> // 获取元素DOM var demo = document.querySelector('#demo') // 开始拖动 demo.ondragstart...document.getElementById('container') // 遍历(拖动动作) for(var i = 0, len = elements.length; i < len; i++){ elements[i].ondragstart

1.5K10

使用jQuery UIdraggabledroppable完成拖拽功能--介绍

个人推荐不是非常复杂需求都可以考虑使用zTree,因为它授权许可是MIT,你可以自由获取,修改分发给他人。...项目中主要使用到jQuery UI里面的draggabledroppable,因为很多老浏览器都不值html5drag api。...我自己也没有去查看zTree源代码,所以也不知道zTree底层拖拽实现是否也是使用了jQuery UIdraggabledroppable方法。...江西财经大学“东华理工大学”是或一个关系,而他们整体”南昌航空大学“又是”且“关系,当然也可以是”排除“关系。这里将实际项目简化了。点击江西高校,可以将下面所有的节点折叠起来。...第三部分--方案思路: 1.了解jQuery draggabledroppable方法工作原理 2.递归思想 3.各个击破 4.熟练使用jQuery操作dom结构 第四部分--参考网址: 1.http

2.2K50

使用jQuery DraggableDroppable实现拖拽功能

另外一种就是拖放到已经有元素区域。两者关系是“或”。单个元素区域有“非”“且”关系。点击右边删除按钮可以删除节点元素。...效果如下图所示: 因为最终左侧元素节点是通过Ajax访问后台返回json数据,然后通过Javascript动态生成这种结构,而已不能为动态生成元素绑定drag事件,也就不能调用draggable方法...如果是拖动子节点元素,就在右边直接显示子节点元素。父节点子节点是相对,因为左侧树形结构节点可以是无限级,所以一个元素既可能是子节点元素,也会是父节点元素。...完成“放”操作。可以从上图看出,我是将元素上边左边下边缘左边存到一个数组里面。然后在“拖”过程中,一直记录了拖动左边,放到右侧时,就可以判断当前元素将要放位置。具体可以下载代码查看。.../ http://jqueryui.com/draggable/

2.7K60

H5在网页中拖放图片

H5中实现拖放效果,常用实现方法是利用事件dragdrop; 1.设置元素为可拖放。... 2.第二步:拖动什么 实现拖放第二步就是设置拖动元素,常见元素有图片,文字,动画,实现拖放功能ondragstartsetData(),即规定当元素被拖动时...dataTransfer.setData()方法设置被拖放数据类型值。..."); 3.第三步:放到何处 实现拖放功能第三步就是讲可拖放元素放到何处,实现该功能事件是ondragover,在默认情况下,无法将数据/元素放置到其他元素中,如果需要设置允许放置,用户必须阻止对元素默认处理方式.../搞笑图片/11.jpg" width="100" height="100" draggable="true" ondragstart="drag(event)"/>

58630

HTML5 dragdrop亲手实践

因此,这阵子就看了一下网上一些dragdrog文章以及W3C介绍,然后自己亲手实践了一下,毕竟打码,才能变得更强。...首先,先放一个我demo,大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html 知识储备 与dragdrog有关属性事件...draggable属性: 如果你想让一个元素变得可以拖曳的话,那么你就必须设置它draggable=true,如下 这样,该元素就可以拖动了 ondragstart: 当元素开始被拖动时,触发该事件,目标对象是被拖动元素 ondragover: 当被拖动元素在悬挂元素上移动时候,该事件触发。...2.为每个div都设置一个ondragstart函数,当该函数触发时候,进行初始化操作,比如记录当前目标对象,拖动目标的y值,以及设置拖动效果。

92930

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券