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

jQuery可拖动和可丢弃在其他可拖动对象上时阻止ondrop事件

jQuery是一个流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画效果等操作。它提供了丰富的API和插件,使得前端开发更加便捷和高效。

在jQuery中,要实现可拖动和可丢弃的功能,可以使用draggable和droppable方法。draggable方法用于将元素设置为可拖动,droppable方法用于将元素设置为可接受其他可拖动对象的目标。

要阻止ondrop事件的触发,可以使用jQuery的事件处理函数。具体步骤如下:

  1. 使用draggable方法将要拖动的元素设置为可拖动:
代码语言:txt
复制
$("#draggable").draggable();
  1. 使用droppable方法将目标元素设置为可接受其他可拖动对象的目标,并在drop事件中阻止默认行为:
代码语言:txt
复制
$("#droppable").droppable({
  drop: function(event, ui) {
    event.preventDefault(); // 阻止ondrop事件的默认行为
    // 其他处理逻辑
  }
});

在上述代码中,#draggable是要拖动的元素的选择器,#droppable是目标元素的选择器。在drop事件中,使用event.preventDefault()阻止ondrop事件的默认行为,然后可以根据需要进行其他处理逻辑。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm

腾讯云云服务器(CVM)是腾讯云提供的弹性计算服务,为用户提供可扩展的云端计算能力。通过CVM,用户可以快速创建、部署和管理虚拟服务器,满足各种计算需求。

优势:

  • 灵活性:支持按需创建、启动、停止和释放云服务器,根据实际需求弹性调整计算资源。
  • 可靠性:提供高可用性和可靠性的云服务器实例,保证业务的稳定运行。
  • 安全性:提供多层次的安全防护机制,保护用户数据和应用程序的安全。
  • 易用性:提供简单易用的控制台和API,方便用户管理和操作云服务器。

应用场景:

  • 网站和应用程序托管:可用于托管网站、应用程序和数据库等,提供稳定的计算资源。
  • 开发和测试环境:可用于创建临时的开发和测试环境,提高开发效率。
  • 大数据处理:可用于处理大规模的数据计算和分析任务。
  • 游戏服务器:可用于搭建游戏服务器,提供稳定的游戏运行环境。

以上是关于jQuery可拖动和可丢弃在其他可拖动对象上时阻止ondrop事件的完善且全面的答案。

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

相关·内容

HTML5 拖放

一、什么是拖放(Drag drop)? 拖放(Drag drop)WEB软件应用中是一种常见的操作,就是用户可以用鼠标点击对象以后拖到另一个位置。...WEB应用开发中,可能需要针对页面中的某个对象:图片、文字、容器等,进行位置的移动来实现自定义的布局 常见的拖放应用一:电商平台中的商家 店铺装修,这个时候电商平台会提供多个可以拖动的模块,商家可以根据...="true" /> 2、设置要拖动的内容(ondragstart setData()) 设置当元素被拖动,要拖动的内容是什么;这里需要给要拖动的元素添加 ondragstart事件(当元素开始用鼠标拖动...如下代码我们如果要将图片放置到另一个div容器中,需要设置这个div容器可以放置其他元素(给他添加ondragover 事件,ondragover 规定当我们拖动的元素经过它的时候,可以将拖动的元素放置到此处...,表示设置允许放置,默认行为是以链接形式打开 } 4、设置拖动元素的新位置(ondrop) 当我们松开鼠标后,表示我们要放置被拖动的数据,这时会发生 drop 事件,我们要规定被拖动的元素需要放置的新位置

1.5K20

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

,被拖拽对象离开目标对象触发拖动事件列表每一个拖动的元素,拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束拖动目标上触发事件 (源元素-被拖动的元素):ondragstart...- 元素开始被拖动时候触发——拖动什么ondrag - 元素被拖动反复触发ondragend - 拖动操作完成触发释放目标触发的事件(目的地对象):ondragenter - 当被鼠标拖动对象进入其容器范围内触发此事件...ondragover - 当被拖动元素目的地元素内触发——放到何处ondragleave - 当被拖动元素没有放下就离开目的地元素触发ondrop - 一个拖动过程中,释放鼠标键触发此事件——...进行放置针对对象事件名称说明被拖动的元素dragstart元素开始被拖动时候触发drag元素被拖动反复触发dragend拖动操作完成触发目的地对象dragenter当被拖动元素进入目的地元素所占据的屏幕空间触发...dragenterdragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。

6.1K21

H5在网页中拖放图片

H5中实现拖放效果,常用的实现方法是利用事件dragdrop; 1.设置元素为拖放。... 2.第二步:拖动什么 实现拖放的第二步就是设置拖动的元素,常见的元素有图片,文字,动画,实现拖放功能的是 ondragstartsetData(),即规定当元素被拖动...function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } 这这个例子中,数据类型是"Text" 值是拖动的元素id("drag1..."); 3.第三步:放到何处 实现拖放功能的第三步就是讲拖放元素放到何处,实现该功能的事件是ondragover,默认情况下,无法将数据/元素放置到其他元素中,如果需要设置允许放置,用户必须阻止对元素的默认处理方式...event.prenventDefault() 第4步:进行放置 当放置被拖放数据,就会发生drop事件,在上面的例子中,ondrop属性调用了一个函数,drop(event),具体代码如下。

55930

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

div的position属性值一定是absolute onmousedown事件需要在window.onload加载 如果被拖动的div上有文字会有自带的文字拖动效果,需要将改div的所有拖动事件绑定在该...操作期间,会触发一些事件类型,有一些事件类型可能会被多次触发(比如drag dragover 事件类型)。   ...这里涉及几个知识点: 拖动元素: 又称为源对象,是指我们鼠标点击之后准备拖动对象(图片、div、文字等) 可放置元素: 又称为目标对象,是指可以放置源对象的区域 事件:...当用户开始拖动一个元素或选中的文本触发 drop ondrop 当元素或选中的文本释放目标上被释放触发 ps:当从操作系统向浏览器中拖动文件,不会触发dragstart dragend...事件 接口: HTML5为所有的拖动相关事件提供了一个新的属性: 源对象目标对象事件间传递数据 ev.dataTransfer {}//数据传递对象对象事件处理中保存数据:

3.1K30

H5拖放原生js将图片拖放另外一个元素里

HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2:元素的拖放 draggable 属性设置为 true 3:元素中的拖放事件 通过拖放事件...其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素触发的,而有些事件放置目标上触发的。...拖动某些元素,将一次触发下列事件:ondragstart、ondrag、ondragend。 按下鼠标键并开始移动鼠标,会在被拖放的元素触发dragstart事件。...触发dragstart事件后,随即会触发drag事件,而且元素被拖动期间会持续发送该事件。 当拖动停止(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。...紧随其后的是dragover事件,而且被拖动的元素还在放置目标的范围内移动,就会持续触发该事件

2K30

前端里的拖拖拽拽了解一下?

拖动元素期间,一些与拖放相关的事件会被触发,像 drag dragover 类型的事件会被频繁触发。...dragendondragend当拖动的元素被释放(️松开、按键盘 ESC)拖拽dragenterondragenter当拖动元素到一个释放目标元素放置dragexitondragexit当元素变得不再是拖动操作的选中目标放置...dragleaveondragleave当拖动元素离开一个释放目标元素放置dragoverondragover当元素被拖到一个释放目标元素(100 ms/次)放置dropondrop当拖动元素释放目标元素释放放置...1.3 DataTransfer 在上述的事件类型中,不难发现,放置元素拖动元素分别绑定了自己的事件如何将拖拽元素放置元素建立联系以及传递数据?...—— DataTransfer - MDN[3] DataTransfer 对象不同浏览器因为标准可能不一样使得 API 有差异,但有几个“标准(常用)”属性方法需要熟悉 Chrome 浏览器

4.6K30

html5鼠标拖动排序及resize实现方案分析及实践

对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...,被拖拽对象离开目标对象触发 目标对象事件: drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象触发,可理解为目标对象内松手触发。...dragenterdragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。...e.preventDefault(); 如果drop接收盒子要想接收到元素,那么接收的拖动元素 dragenterdragover必须阻止默认行为。...在所有的拖放事件中都提供了一个数据传输对象dataTransfer,主要是用于对象目标对象之间传递数据。

3K10

HTML5绘画与拖放事件

意思是:画布绘制 100x100 的矩形,从左上角开始 (10,10)。 如下图所示,画布的 X Y 坐标用于画布对绘画进行定位。 ?...地图可以自己二维数组绘制,1表示显示墙的图片,2表示显示钢板的图片,3则是显示草地的图片。 拖放事件 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。...设置元素为拖动: 为了使元素拖动,需要把元素中的 draggable 属性设置为 true ,img元素是默认可拖动的,例如我把div设置为拖动: ? 运行结果,可以看到能够将div拖动: ?...ondragover事件: ondragover 事件会在被别的元素触碰到时触发,通过这个事件事件对象,可以设置何处放置被拖动的元素。 默认地,无法将元素放置到其他元素中。...在这个事件触发也可以打印一些消息,代码示例: ? 运行结果: ? ondrop事件: 当放置元素,就会触发 drop 事件

3K30

JavaScript进阶之实现拖拽

事件指针设备按钮按下触发。...mouseup事件指针设备按钮抬起触发。 当指针设备( 通常指鼠标 )元素移动, mousemove 事件被触发。 JavaScript三大家族 ? ? 明白了上述?...,此事件作用在目标元素 ondragover 事件:拖拽元素目标元素移动的时候触发的事件,此事件作用在目标元素 ondrop 事件:被拖拽的元素目标元素同时鼠标放开触发的事件,此事件作用在目标元素...ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素 Event.preventDefault()方法:阻止默认的些事件方法等执行。...有 3 个效果可以定义: copy 表明被拖动的数据将从它原本的位置拷贝到目标的位置。 move 表明被拖动的数据将被移动。 link 表明拖动源位置目标位置之间将会创建一些关系表格或是连接。

2.6K40

HTML5 - 拖放

使用 preventDefault() 取消事件的默认动作 拖放事件 拖动元素-事件事件 描述 ondragstart 当元素开始被拖动触发——开始拖动 ondrag 拖动源触发——正在拖动...ondragend 拖动拖动操作结束将得到dragend对象(不管成功与否)——拖动结束 注意:ondrag事件拖动元素一直触发,在后面的例子你会看到。...放置元素-事件事件 描述 ondragenter 当拖动中鼠标第一次进入一个元素触发 ondragover 当拖动中的鼠标移动经过一个元素触发 ondragleave 当拖动中的鼠标离开元素触发...ondrop拖动操作结束并释放于释放元素触发 注意:只有拖拽触发相关事件,鼠标事件是不会触发的。...body> 开始拖动——正在拖动——放下 此时,控制台打印结果如下: demo 进行拖放操作的时候,dataTransfer对象可以用来保存被拖动的数据。

1.5K10

前端拾零02—H5拖放总结

H5拖放分为两部分:拖放元素目标元素,分别有不同的属性监听事件 2....ondragend: 拖放完成触发事件,作用于拖放元素 2.3 demo <img id="dragData" width="100" title="拖放<em>对象</em>" src="http://www.csxiaoyao.com...目标元素 3.1 目标元素监听<em>事件</em> ondragenter: 拖放元素进入目标元素<em>时</em>触发<em>事件</em>,作用于目标元素 ondragover: 拖放元素<em>在</em>目标元素<em>上</em>移动<em>时</em>触发<em>事件</em>,作用于目标元素 <em>ondrop</em>:...拖放元素<em>在</em>目标元素<em>上</em>放置<em>时</em>触发<em>事件</em>,作用于目标元素 ondragleave: 拖放元素离开目标元素<em>时</em>触发<em>事件</em>,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...Event.preventDefault() Event.preventDefault(): <em>阻止</em>默认<em>事件</em>方法执行,ondragover中一定要执行preventDefault(),否则<em>ondrop</em><em>事件</em>不会被触发

4.2K730

前端拾零02—H5原生拖放总结 【原创】

H5拖放分为两部分:拖放元素目标元素,分别有不同的属性监听事件 2....ondragend: 拖放完成触发事件,作用于拖放元素 2.3 demo <img id="dragData" width="100" title="拖放<em>对象</em>" src="http://www.csxiaoyao.com...目标元素 3.1 目标元素监听<em>事件</em> ondragenter: 拖放元素进入目标元素<em>时</em>触发<em>事件</em>,作用于目标元素 ondragover: 拖放元素<em>在</em>目标元素<em>上</em>移动<em>时</em>触发<em>事件</em>,作用于目标元素 <em>ondrop</em>:...拖放元素<em>在</em>目标元素<em>上</em>放置<em>时</em>触发<em>事件</em>,作用于目标元素 ondragleave: 拖放元素离开目标元素<em>时</em>触发<em>事件</em>,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...Event.preventDefault() Event.preventDefault(): <em>阻止</em>默认<em>事件</em>方法执行,ondragover中一定要执行preventDefault(),否则<em>ondrop</em><em>事件</em>不会被触发

1.9K20

HTML 5 - draggable属性讲解

本例知识点 1、首先,为了使元素拖动,把 draggable 属性设置为 true : 2、ondragstart - 用户开始拖动元素触发 3、ondragover - 当某被拖动对象另一对象容器范围内拖动触发此事件...4、ondrop - 一个拖动过程中,释放鼠标键触发此事件 5、dataTransfer对象事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据。...6、dataTransfer对象有两个主要的方法:getData()方法setData()方法。...而移动端只有touch事件,touch根本就没有dataTransfer,自然也就没有getData()setData()方法了。...我个人感觉,dataTransferlocalStorage 很相似,都是本地保存一些数据。 不同之处在于,dataTransfer只用于从被拖拽元素向 放置目标元素 传递字符串格式的数据。

1.4K50

12.HTML5下一代的HTML标准介绍与初识尝试

标签我们 9.HTML多媒体对象标签元素介绍文章中已做详细介绍,此处不再累述了,有需要的朋友请自行取走。...流程思路 设置元素为拖放首先,为了使元素拖动,把 draggable 属性设置为 true : 拖动什么 -> ondragstart (事件...setData(),然后,规定当元素被拖动,会发生什么。...放到何处 -> ondragover事件规定在何处放置被拖动的数据。 默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止对元素的默认处理方式。...这要通过调用 ondragover 事件的 event.preventDefault() 方法:event.preventDefault(); 使其取消默认事件 进行放置 -> ondrop事件当放置被拖数据

23720

HTML5原生拖放事件的学习与实践

专注前端与算法的系列干货分享,转载请声明出处:原文链接: xxoo521.com 拖放事件介绍 由名字可以看出来,拖放事件由 2 部分组成:拖动释放。...而拖动又由 2 部分组成,分别是被拖动元素的相关事件元素容器的相关事件。...1、被拖动元素的相关事件事件名称 说明 dragstart 元素开始被拖动时候触发 drag 元素被拖动反复触发 dragend 拖动操作完成触发 2、容器的相关事件事件名称 说明...dragover 当被拖动元素目的地元素内触发,一般需要取消浏览器的默认行为。...dragleave 当被拖动元素没有放下就离开目的地元素触发 3、释放事件事件名称 说明 drop 当被拖动元素目的地元素里放下触发,一般需要取消浏览器的默认行为。

1.1K20

HTML5 dragdrop的亲手实践

ondragstart: 当元素开始被拖动,触发该事件,目标对象是被拖动的元素 ondragover: 当被拖动元素悬挂元素移动的时候,该事件触发。...目标对象是被拖动元素悬挂的那个元素。 ondragleave: 当被拖动元素离开悬挂元素,触发该事件。目标对象是被拖动元素悬挂的那个元素。 ondrop: 当鼠标松开被拖动元素的时候,触发该事件。...目标对象是被拖动元素悬挂的那个元素。 ondragend: 当鼠标松开被拖动元素的时候,触发该事件。目标对象是被拖动的元素。其中,ondrop事件会先于ondragend事件触发。...// 拖动的目标对象 let target = '' // 拖动的目标对象的y值 let targetOffsetTop = 0 // 当元素开始被拖动,触发该事件,目标对象是被拖动的元素 function...当ondragleave事件触发的时候,则把dotted类从目标对象移除。 // 当被拖动元素悬挂元素移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。

91230
领券