javaScript drag对象进行拖拽使用详解

最新推荐文章于 2021-01-08 09:25:30 发布
最新推荐文章于 2021-01-08 09:25:30 发布
阅读量1.3k 收藏
点赞数
文章标签： javascript 操作系统 ViewUI
原文链接：http://www.cnblogs.com/shiyou00/p/10393703.html
版权
本文详细介绍了HTML5中的drag事件和DataTransfer对象，讲解了如何设置可拖拽目标，监听拖放事件，以及从操作系统拖拽图片到网页预览。同时强调了兼容性和使用drag进行拖放操作时获取拖放数据的方法。
摘要由CSDN通过智能技术生成
目录

drag简介

HMTL5提供的支持原生拖拽的实现

兼容性如何？

958602-20190218193204596-1803532108.png

桌面端的支持比较好，移动端的支持还是比较差

拖拽流程

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽(文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。)
2.监听dragstart，通过DataTransfer设置拖拽数据
3.为拖拽操作设置反馈图标(

最低0.47元/天 解锁文章
baoao1875
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现拖拽功能
xiaoba_598的博客
06-02 2647
盒子拖拽 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8
overflow鼠标拖拽显示_JavaScript进阶之实现拖拽
weixin_39989875的博客
12-03 416
最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd之前我们来实现原生拖拽原生实现拖拽 Mouse事件实现拖拽在h5之前，原生实现拖拽是根据Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemo...
javascript drag
浮白
08-31 1536
用Javascript实现网页表单鼠标拖拽 作者：　日期：2006-7-26　人气：224      作者：雪山老人 译     怎么用javascript进行拖拽　　本文译自：http://www.webreference.com
drag使用总结
weixin_36430673的博客
01-08 1143
1、html5基础用法： 设置属性：draggable=true，属性规定元素是否可拖动。 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。 </p> 2、angular 项目
JavaScript--drag
iceman0012
02-15 113
直接上代码吧！ &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt..
JavaScript使用面向对象实现的拖拽功能详解
12-10
总结，本实例展示了如何使用JavaScript面向对象的方式来实现拖拽功能。通过封装变量和行为，我们可以创建一个可复用的`Drag`类，从而提高代码的可读性和可维护性。这种面向对象的设计思想在实际开发中具有很高的价值...
基于javascript的拖拽类封装详解
10-17
通过这样的封装，用户只需要简单引入JavaScript和CSS文件，然后创建`Drag`对象并传入相应的参数，即可实现拖拽、旋转、缩放等功能。这样既简化了代码，又提高了代码的复用性，符合良好的编程实践。在实际项目中，...
JS面向对象编程实现的拖拽功能案例详解
10-15
在JavaScript中，面向对象编程（OOP）是一种强大的设计模式，它允许我们通过类和对象来组织和管理代码。在拖拽功能的实现中，面向对象编程提供了更可维护、可扩展的解决方案。下面我们将详细讲解如何使用JS面向对象...
vue拖拽排序插件vuedraggable使用方法详解
10-17
接着，我们可以在模板中使用 `<draggable>` 组件来实现拖拽排序。下面是一个基本示例： ```html <div v-for="element in colors" :key="element.text" class="drag-item"> {{ element.text }} ``` ...
vue拖拽组件使用方法详解
12-02
Vue.js 拖拽组件实现详解 在前端开发中，我们常常需要实现用户可以通过拖拽操作来调整元素的顺序或位置，例如在列表中的排序。Vue.js 是一款流行的JavaScript框架，它提供了丰富的功能来帮助开发者构建用户界面。...
Vue组件Draggable实现拖拽功能
10-17
主要为大家详细介绍了Vue组件Draggable实现拖拽功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 拖动drag算法
weixin_30660027的博客
01-12 121
元素拖动前提条件:元素为定位元素, 个人建议position:absolute; 算法1 var left,top,x,y; var element = document.getElementById('drag'); element.onmousedown = function(e){ e = e || window.event; left = this.o...
javascript drag类
mrtuzi的专栏
12-19 362
drag类<!--#pop{width:400px;background-color:#CCCCCC; border:1px solid #000;}#popt{border:1px solid #000; border-left:none; border-right:none; cursor:move}#btnclost{cursor:hand;flo
JavaScript拖放实现
Chef_Front的博客
03-26 471
拖放概念：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象放在这里。 基本思路： 创建一个绝对定位的元素，使其可以用鼠标移动。 本文通过实例代码讲解如何实现拖放功能。 HTML代码实现 在写js代码之前，我们先创建一个用于拖动的红色方块。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...
javascript拖拽之从浏览器外拖拽（drag）
咖啡味的小认真
08-11 943
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5拖放API之图片相框效果</title> <!-- <link rel="stylesheet" href="css/photoframe.css"> -->...
javascript drag&drop beginning
wangxin0072000的专栏
05-11 106
[b]javascript drag&drop beginning[/b] 首先我不赞成自己实现拖拽功能，因为比较麻烦， 建议用当下比较流行的一些库，用什么那就看项目需要了， 但是即便用别人的东西也只至少知道原理，所以我们先看看原理吧 如果想自己手动实现拖拽，那么我们先看看都要有哪些工作要做。 1 至少要获得鼠标的坐标吧，不然还干个屁。 2 至少要获得鼠标的动作吧，不然我怎么知道什么时...
使用Javascript进行drag&drop操作
dengminhui
12-02 310
使用Javascript进行drag&amp;drop操作，示例代码如下：   这是drag&amp;drop图片的例子： &lt;html&gt; &lt;head&gt; &lt;title&gt; System Drag And Drop Example &lt;/title&gt; &lt;script &gt; function handleDragDropEvent(...
利用drag和drop实现列表自由拖拽和插入
weixin_34195546的博客
11-21 595
现在项目中需要实现一个自由拖拽插入的功能，类似于下面这样 在网上找了一下发现没有类似的功能，都不是利用drag和drop实现的，而本人强迫症发作，必须用这两个方法实现，现在做出了大概的功能： 首先，拿到这个需求的思路就是利用拖拽，拖拽事件中有三个值得一提的，ondrop，ondragstart，ondragover,这三个事件的意思分...
javascript中的拖拽问题
fish_skyyyy的博客
12-18 290
使用js写一个简易拖拽模块 针对于拖拽问题，不得不先了解几个必要的事件： 在拖动目标上触发事件 事件 解释 ondragstart 用户开始拖动元素时触发 ondrag 正在拖动元素时触发 ondragend 用户完成元素拖动时触发 释放目标时触发的事件 事件 解释 ondragenter 当拖动对象进入其容器范围内触发 ondragover 当拖动的对象在另一对象容器范围内拖动时触发 ondragleave 当拖动的对象离开其容器范围内时触发 ond
"JavaScript实现简洁div拖拽功能实例详解
本文主要介绍了如何使用JavaScript实现简洁的div拖拽功能，通过实例分析了JavaScript针对div层拖拽的实现技巧，并且提供了详细的实现方法。读者可以参考本文提供的内容，实现自己的div拖拽功能。 ## 实现方法 ### ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值