jQuery可拖动和可丢弃在其他可拖动对象上时阻止ondrop事件 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

JavaScript 学习-50.实现页面菜单拖放（Drag 和 Drop）

拖放的内容 - ondragstart 和 setData() 然后，规定当元素被拖动时发生的事情。...); } 在本例中，数据类型是 “text”，而值是这个可拖动元素的 id (“drag1”)。...拖到何处 - ondragover ondragover 事件规定被拖动的数据能够被放置到何处。默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。...; // }; //当源对象在目标元素上方释放鼠标时 document.ondrop = function(event){ console.log('上方释放')...; }; //当源对象在目标元素上方释放鼠标时 document.ondrop = function(event){ console.log('上方释放')

1.9K2 0

HTML5 拖放

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

2.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

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

8.3K2 1

H5在网页中拖放图片

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

8663 0

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

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

2.8K3 0

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

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

3.9K3 0

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

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

3.9K1 0

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

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

6.1K3 0

HTML5 的拖放（实例：两个div之间拖放图片）

重点解释：首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ： dataTransfer.setData() 方法设置被拖数据的数据类型和值： ondragover...事件规定在何处放置被拖动的数据。...默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。...这要通过调用 ondragover 事件的 event.preventDefault() 方法：当放置被拖数据时，会发生 drop 事件。...再拖动回去 ? ........ 在两个元素之间拖放图像--- 代码清单： <!

3K1 0

HTML5绘画与拖放事件

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

4K3 0

基于h5+ angularjs页面拖拽实现

正题 1.h5提供的拖放事件设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：拖动什么 - ondragstart...和 setData() 然后，规定当元素被拖动时，会发生什么。...放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。...这要通过调用 ondragover 事件的 event.preventDefault() 方法： event.preventDefault() 进行放置 - ondrop 当放置被拖数据时，会发生...本文注意点 1.js的事件函数如何调用定义在angularjs中的函数?

1.9K2 0

JavaScript进阶之实现拖拽

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

3.2K4 0

前端拾零02—H5拖放总结

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

4.5K73 0

HTML5 - 拖放

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

2.3K1 0

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

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

2.2K2 0

【Vue.js ——功能实现】趣购（蓝桥杯真题-2426）【合集】

带有属性 draggable 的可拖放元素可用的拖放事件 api 如下：拖动事件：事件事件处理程序触发时刻 drag ondrag 当拖拽元素或选中的文本时触发。...事件处理程序触发时刻 dragenter ondragenter 当拖拽元素或选中的文本到一个可释放目标时触发 dragleave ondragleave 当拖拽元素或选中的文本离开一个可释放目标时触发...dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次） drop ondrop 当元素或选中的文本在可释放目标上被释放时触发，想要 ondrop...handleDrop(event)：在商品被拖放到购物车并释放鼠标时触发，阻止默认的 drop 行为，从 event.dataTransfer 中获取商品信息并解析为对象，然后将该商品对象添加到 bought...拖入购物车：用户将商品拖动到购物车上方，触发 dragover 事件，由于阻止了默认行为，继续拖动。

4320 0

H5新特性拖拽更换图片

// 事件源拖动结束 p.ondragend = function (e) { } } // 拖动目标对象,鼠标进入目标对象...(e) { }; // 鼠标在目标对象上释放 chosen.ondrop = function (e) { // 隐藏问号飞机...list.ondragenter = function (e) { }; // 鼠标在目标对象上释放 list.ondragover = function...(e) { // 阻止默认,使得drop可能触发 e.preventDefault(); }; // 鼠标离开目标对象...list.ondragleave = function (e) { }; // 鼠标在目标对象上释放 list.ondrop = function (e)

8861 0

HTML 5 - draggable属性讲解

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

1.7K5 0

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

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

1.3K2 0

HTML5 drag和drop的亲手实践

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

1.2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭