开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js拖拽事件ondrop

基础概念

ondrop 是 JavaScript 中的一个事件处理器，用于处理元素被拖放到有效拖放目标上的情况。这个事件通常与 dragstart 和 dragover 事件一起使用，以实现拖放功能。

相关优势

用户友好：拖放操作直观且易于用户理解和使用。
提高效率：允许用户通过简单的拖放动作快速完成数据或元素的移动和排序。
灵活性：可以应用于各种界面元素，如列表、网格、画布等。

类型与应用场景

文件上传：允许用户通过拖拽文件到指定区域来上传文件。
界面布局调整：在网页设计中，允许用户通过拖拽来调整元素的位置。
数据排序：在列表或表格中，允许用户通过拖拽来重新排序数据项。

示例代码

以下是一个简单的 ondrop 事件处理示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
  #dropZone {
    width: 200px;
    height: 200px;
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 200px;
  }
</style>
</head>
<body>

<div id="dropZone">Drop here</div>
<img id="dragItem" src="image.jpg" draggable="true" width="100" height="100">

<script>
  const dropZone = document.getElementById('dropZone');
  const dragItem = document.getElementById('dragItem');

  dragItem.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', 'Image Data');
  });

  dropZone.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  dropZone.addEventListener('drop', (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    dropZone.innerHTML = `<img src="${dragItem.src}" width="100" height="100">`;
    dropZone.style.borderColor = 'green';
  });
</script>

</body>
</html>

遇到的问题及解决方法

问题1：拖放操作无法触发 `ondrop` 事件

原因：通常是因为没有阻止 dragover 事件的默认行为。

解决方法：在 dragover 事件处理器中调用 event.preventDefault() 方法。

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault();
});

问题2：拖放后数据未正确传递

原因：可能是因为 dataTransfer 对象没有正确设置或获取数据。

解决方法：确保在 dragstart 事件中设置了数据，并在 drop 事件中正确获取数据。

dragItem.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Some Data');
});

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  console.log(data); // 应该输出 'Some Data'
});

通过以上方法，可以有效解决常见的拖放操作问题，并实现流畅的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Js拖拽事件

oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; } 知识点：用class获取元素封装; 学习mouseover事件...; 常见拖拽bug造成原因,鼠标当前位置-元素距离浏览器的位置；超过容器大小判断；

14.1K2 0

js事件高级：拖拽

什么是拖拽拖拽就是在某一个对象上，当鼠标按下去之后，拖着对象走，松开鼠标时，对象位置变成拖拽的位置简单拖拽 1.实现简单的拖拽功能 2.当拖拽对象到网页边缘时，会停留在边缘实现代码 <!...oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; //将鼠标移动事件都加在..._吸附 1.在实现简单拖拽的基础上给拖拽对象一个区域范围 2.拖拽吸附：在靠近父级边缘时自动吸附在父级边缘实现代码拖拽是拖拽的另一种形式，拖动时，跟着移动的是对象的虚线框，虚线框就是对象将要拖移到达的位置实现代码 <!...return false; //足以解决chorm ff IE9的问题 } else { //将鼠标移动事件都加在document

9.4K2 0

js拖拽

开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。先看一下之前写的：如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。...因为我们是监听鼠标移动事件，鼠标移动的时候需要执行我们定义的函数，函数执行会有一些延时，当鼠标移动速度过快，导致函数的延时使得元素跟不上鼠标移动的速度，从而鼠标移出了元素，也就造成了元素不跟随鼠标了。

5.4K3 0

js拖拽

/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的....鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!

4.6K4 1

js拖拽

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>...

5.2K1 0

原生JS中的拖拽事件兼容性问题

写个小Demo，分享一下使用原生JS实现拖拽时的兼容性问题如何解决？代码如下：原生JS...中的拖拽事件兼容性问题 #div1 { width: 100px; height: 100px;...oDiv.onmousemove = fnMove; oDiv.onmouseup = fnUp; //针对IE浏览器，把所有的鼠标事件放到...this.onmousemove = null; this.onmouseup = null; //鼠标抬起时，释放setCaptrue事件

2.1K1 0

从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

一、拖拽接口元素拖拽事件： ondrag ：应用于拖拽元素，整个拖拽过程都会持续调用； ondragstart：应用于拖拽元素，当拖拽开始时调用； ondragleave：应用于拖拽元素，拖拽过程中...目标拖拽事件： ondragenter：应用于目标元素，当拖拽元素进入时调用； ondragover：应用于目标元素，当停留在目标元素上时调用； ondrop：应用于目标元素，当在目标元素上松开鼠标时调用...2、浏览器默认会阻止目标元素的 ondrop 事件：我们必须在目标元素的 ondragover 中阻止浏览器的默认行为（使用事件参数对象的 preventDefault()方法），才能将拖拽的元素放到目标元素中...遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。...(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document.ondrop=function(e){

1.5K2 0

原生JS拖拽

="IE=edge"> 原生JS...拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候

13.1K4 0

Easyui datagrid 实现表格记录拖拽

，注释头尾两行代码，如下 //(function($){ //})(jQuery); 关键代码引入js文件 js.../datagrid-dnd.js"> 定义表格，添加事件onBeforeDrag，onDrop 事件：事件参数...描述 onBeforeDrag row 当一行的拖拽开始前触发，返回 false 则取消拖拽。...onDrop targetRow,sourceRow,point 当一行被放置时触发。 targetRow：放置的目标行。 sourceRow：拖拽的源行。...= undefined) { // 处于正在编辑状态,取消拖拽 return false; } } // 停止拖拽，释放鼠标，提交目标行，被拖拽行，拖拽方向灯相关数据到服务器

1.4K2 0

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

前言之前学习了 HTML5 的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。...请前往 Github 仓库下载 demo.html 和 demo.js 到本地，然后用 Chrome 打开 html 文件，初始效果如下图： ?...被拖拽元素的 draggable 属性需要指明为 true ，才可以被拖拽。同时为了记录一些信息，需要监听 dragstart 事件。 <script src="....ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)...="onDrop(event)" >div> body> 为了让拖拽效果更明显，实现效果展示->第二部分的，拖拽元素进入一个新的容器的时候，新容器展示阴影效果。

1.2K2 0

js拖拽上传图片

有时候，在开发中，需要遇到拖拽上传图片的需求，即从磁盘选中一张或多张图片，然后按着鼠标把图片拖动到页面上指定的区域，实现图片的上传。...ie=edge"> Document js

18.2K3 0

React拖拽组件react-grid-layout实现表单设计

React-Grid-Layout是一个基于 react 的网格布局系统，可实现基于表格的拖拽功能。...npm install bootstrap npm install react-bootstrap 代码实现（最后附完整 App.js 实现代码）看一下要实现的功能和布局：左边是个控件列表，这里只放了三个控件...compactType: "vertical", mounted: false, items: items, layouts: { lg: layout } }); 实现左侧控件的拖拽事件..." + Date.now(); e.dataTransfer.setData("text/plain", ""); }; 实现右侧区域的的拖拽事件，主要是根据当前拖拽控件，设置名字和位置...el.startsWith('select')) { ... } else { ... } })} 完整 App.js

6031 0

H5(drag，百度地图使用，requestFullscreen，H5应用缓存)

1.拖拽元素 /*有拖拽属性，就有属性对应的拖拽事件*/ //拖拽开始 var box = document.querySelector...=function(){ console.log('拖拽结束了') } //拖拽离开：鼠标拖拽时，离开被拖拽的元素就触发该事件 box.ondragleave...事件才会生效 } two.ondrop=function(){ //把拖拽的元素添加进来即可 this.appendChild(temp); }...--01.js--> js--> js文件--> <!

1.9K1 0

JS实现拖拽代码

////html的代码说明： ////定义了一个table，用于测试js拖拽功能 2 3 ////js...relLeft; currentMoveObj.style.pixelTop = event.y - relTop; } } ////为每一个TABLE对象注册mousedown和mousemove事件...function(){ mouseDown(obj)}; obj.onmousemove= function(){ mouseMove()}; } JS...拖拽

8.1K0 0

三天学会HTML5 ——多媒体元素的使用

拖拽操作 4. 获取位置信息 5....拖拽操作的实现在之前，实现拖拽操作都是开发人员自定义逻辑来实现，但是HTML5提供了拖拽API ，使得拖拽操作的实现变得如此简单。 1. 准备资源（图片资源） 2....ondragover 事件制定被拖拽的数据。...function allowDrop(ev) { ev.preventDefault(); } 当拖拽的元素被鼠标释放时，自动调用ondrop 事件 function drop(ev) { ev.preventDefault...地理位置信息的获取 HTML5 可以共享位置信息，精度和维度都可以通过JS事件来捕捉并返回给服务器来在google 地图中定位。初始化： 1.

2.2K9 0

js拖拽自动排列

上一次写了拖拽，其实主要还是想实现拖拽之后实现自动排列，跟手机屏幕那样移动图标可以自动排列，先看效果： ? 很常见的一个效果，先说一下思路：每一个元素都是绝对定位，初始化的时候是通过js去排列。...拖拽使用的方法跟上一篇文章一模一样。...拖拽的时候，当鼠标点击选中当前的元素的时候，这个元素移动，当移动到另一个元素一半的时候，相当于要替换这个元素，我是以这样一个方法判断移动到哪一个位置： let moveIndex = Math.round

5.7K2 0

js不借助后端,多文件拖拽压缩上传,支持选择文件夹

在系统中上传文件时,需要支持多文件和文件夹上传,并且需要在文件上传时需要将多文件压缩成zip包,下载的时候,直接下载zip包听到这个需求,我的第一反应就是js应该没有强大吧,因为压缩和访问文件夹,涉及到了文件系统的读取和修改...主要用到的库是 jszip 则则这里简单对jszip做下简单介绍,更详细的功能和api请移步官网. jszip是是一个创建,读取和写入.zip文件的js库, api优化,简单浏览器支持实现思路如下...important } 这里说一下拖拽上传文件, 主要是用到的原生事件是这三个 ondrop ondragover ondragleave 加上prevent 可以防止拖拽过程...,浏览器直接打开文件,阻止事件默认行为....在ondragover的事件上可以处理文件拖拽到了可放置的元素上,对用户进行友好提示. ondrop 事件是文件拖拽到了元素上,松开鼠标时触发, 这个时候可以通过事件拿到拖拽的文件列表使用even.dataTransfer.files

3.5K1 0

touch实现js拖拽

用touch做js拖拽.记住，touch只在移动端有效. 问题：为什么用定位流做? 因为 ? 问题2：touches[0]是什么意思？是一次只有一个手指触碰....问题3：为什么前面加e，因为是事件这个领域里面的属性啊. ? 问题4,拖拽怎么做？第一;我举个例子把，好吧....（移动后的）最终达到了拖拽的目的. 核心：开始是开始的xy坐标,移动是移动的xy坐标. <!

5.5K5 1

js实现简易拖拽

简易拖拽目录代码实例代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析下载源码链接代码实例 <...鼠标的移动动作 document.onmousemove = move // 释放鼠标的动作 document.onmouseup = up // 鼠标按下后的函数,e为事件对象...{ x: x, y: y } } })() 代码解析在 document 对象上绑定 mousemove 和 mouseup 事件...，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽，而绑定在 document 上则可以避免这样的事情发生。...拖拽再快都不会超出 document 的范围。

6.3K1 0

js 实现元素拖拽

概述 js 实现拖拽，主要使用元素的 onmousedown、onmousemove、onmouseup 三个事件实现。...1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件实现思路我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y...坐标，这里我们使用diffX和diffY来表示然后我们移动时需要不断计算当前元素距离浏览器左边和上边的距离；同时给元素进行赋值；当鼠标抬起时，取消鼠标移动事件和鼠标抬起事件。...// 元素的 clientX 和 clientY 默认是以元素左上角位置来计算的，这里需要向左向上同时减去鼠标点击的位置差，从而可以保证鼠标始终显示在拖拽元素时的位置

10.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭