js拖拽和放置(javascript drag and drop)

最新推荐文章于 2024-04-23 09:43:45 发布
最新推荐文章于 2024-04-23 09:43:45 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： Javascript 文章标签： javascript class function null div c
 

Submitted by koyoz on 2008, June 8, 10:49 PM. javascript

js拖拽和放置效果.

这个drag-drop.html

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>js drag + drop koyoz</title>  
  6. <style type="text/css">  
  7. * {margin:0px;padding:0px;font-size:12px;}   
  8. #drop{position:absolute;width:200px;height:300px;border:1px #A5B6C8 solid;background:#EEF3F7;left:400px;top:100px;padding:10px;}   
  9. .item {width:100px; height:28px;background:#C2ECA7;text-align:center;line-height:28px;cursor:pointer;margin-top:5px;}   
  10. #items {margin: 50px 0 0 100px;}   
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <div id="drop">拖过来试试</div>  
  16.   
  17. <div id="items">  
  18. <div id="item1" class="item">11111</div>  
  19. <div id="item2" class="item">22222</div>  
  20. <div id="item3" class="item">33333</div>  
  21. <div id="item4" class="item">44444</div>  
  22. <div id="item5" class="item">55555</div>  
  23. <div id="item6" class="item">66666</div>  
  24. </div>  
  25.   
  26.   
  27.   
  28. <script type="text/javascript" src="drag-drop.js"></script>  
  29. <script type="text/javascript">  
  30. //逐个注册drag事件   
  31. var itemx = document.getElementById('items').getElementsByTagName("div")   
  32. for(var i = 0; l = itemx.length, i < l; i++)   
  33. {   
  34.     makeDrag(itemx[i]);   
  35. }   
  36. //注册放置对象   
  37. var dropItem = document.getElementById('drop');   
  38. makeDrop(dropItem);   
  39. </script>  
  40. </body>  
  41.   
  42. </html>  

这是drag-drop.js 

JavaScript代码
  1. var makeDrag_flag = false;   
  2. var makeDrop_objs = [];   
  3. //注册放置对象   
  4. function makeDrop(obj)   
  5. {   
  6.     makeDrop_objs.push(obj);       
  7. }   
  8. //注册拖动对象   
  9. function makeDrag(obj)   
  10. {   
  11.     obj.onmousedown = function (e)   
  12.     {   
  13.         if (!document.all) e.preventDefault();   
  14.         var oPos = getObjPos(obj);   
  15.         var cPos = getCurPos(e);   
  16.         makeDrag_flag = true;   
  17.         document.onmouseup = function (e){   
  18.             makeDrag_flag = false;   
  19.             document.onmousemove = null;   
  20.             document.onmouseup = null;             
  21.             //放置位置检查开始   
  22.             var nPos = getCurPos(e);               
  23.             for(i = 0; i < makeDrop_objs.length; i++)   
  24.             {   
  25.                 var tg = makeDrop_objs[i];   
  26.                 var tPos = getObjPos(tg);   
  27.                 var tg_w = tg.offsetWidth;   
  28.                 var tg_h = tg.offsetHeight;   
  29.                 if ((nPos.x > tPos.x) && (nPos.y > tPos.y) && (nPos.x < tPos.x + tg_w) && (nPos.y < tPos.y + tg_h))   
  30.                 {   
  31.                     tg.innerHTML += '<p>' + obj.innerHTML + '拖入</p>'  
  32.                     obj.style.display = 'none';   
  33.                 }   
  34.             }   
  35.             //放置位置检查结束   
  36.         };   
  37.         document.onmousemove = function (e)   
  38.         {   
  39.             if (makeDrag_flag)   
  40.             {   
  41.                 obj.style.position = 'absolute';   
  42.                 var Pos = getCurPos(e);   
  43.                 obj.style.left = Pos.x - cPos.x + oPos.x + 'px';   
  44.                 obj.style.top = Pos.y - cPos.y + oPos.y + 'px';   
  45.             }   
  46.             return false;   
  47.         }   
  48.     }   
  49. }   
  50.   
  51. function getObjPos(obj)   
  52. {   
  53.     var x = y = 0;   
  54.     if (obj.getBoundingClientRect)   
  55.     {   
  56.         var box = obj.getBoundingClientRect();   
  57.         var D = document.documentElement;   
  58.         x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;   
  59.         y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop;        
  60.     }   
  61.     else  
  62.     {   
  63.         for(; obj != document.body; x += obj.offsetLeft, y += obj.offsetTop, obj = obj.offsetParent );   
  64.     }   
  65.     return {'x':x, 'y':y};   
  66. }   
  67.   
  68. function getCurPos(e)   
  69. {   
  70.     e = e || window.event;   
  71.     var D = document.documentElement;   
  72.     if (e.pageX) return {x: e.pageX, y: e.pageY};   
  73.     return {   
  74.         x: e.clientX + D.scrollLeft - D.clientLeft,   
  75.         y: e.clientY + D.scrollTop - D.clientTop       
  76.     };   
  77. }  
a9529lty
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML5 拖放（Drag 和 Drop）
爱睡的虫虫
05-21 2590
HTML5 拖放（Drag 和 Drop） 简介 拖拽(Drag/Drop)是个非常普遍的功能。在生活中，拖放物品其实是相当常见的一个动作。你可以抓住一个对象，并且拖动到你想放置的区域。 在HTML5中，拖拽(draganddrop)成为了标准操作，任何元素都支持。 定义 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 定义和用法...
Js高级技巧—拖放
10-15 433
为 DragDrop 对象的每个事件添加了事件处理程序。还使用了一个元素来实现被拖动的元素当前的状态和位置。一旦元素被放下了，就可以看到从它一开始被拖动之后经过的所有的中间步骤。 为 DragDrop 添加自定义事件可以使这个对象更健壮，它将可以在网络应用中处理复杂的拖放功能。
探索Drop.js：轻量级JavaScript拖放库的魅力
最新发布
gitblog_00072的博客
04-23 273
探索Drop.js：轻量级JavaScript拖放库的魅力 项目地址:https://gitcode.com/cyclegtx/drop.js 在前端开发中，实现拖放功能通常需要一些复杂的工作，但Drop.js为我们提供了一种简单、优雅的解决方案。这是一个由Cyclegtx开发的小巧且强大的JavaScript库，旨在使添加拖放功能到任何Web应用变得更加容易。 项目简介 Drop.js是一个专注...
Drag & Drop 全解析
jackfengwei的专栏
10-30 1742
一、基本概念 拖 放，是指用鼠标拖动的方法，在不同程序的窗口之间、同一个程序的不同窗口之间或同一程序同一窗口的不同控件之间，进行移动、复制和粘贴等操作的技术。拖放 操作是在操作系统的帮助下完成的。被拖动的对象首先向操作系统注册它使用的数据格式，并按指定的数据格式提供数据，拖放操作结束时，接收拖放的窗口按指定 的数据格式提取有关数据，并根据提取的数据生成相应的对象。 二、两种拖放方式 拖放有两
HTML5 拖放Drag和drop用法以及事件介绍
weixin_50756332的博客
03-23 1884
这里是一个拖拽小案例的实现
Drag Drop 入门介绍
商少
04-17 3691
鼠标拖拽简介 初衷 完成一个给打开的QQ窗口自动发送文件的程序。 使用 在资源管理器中进行拖拽操作，没有键盘操作的话。不同分区间默认为拷贝，同分区间默认为move操作。 如果加上键盘操作，则会规定操作的类型如下： Shift       move Ctrl                    copy Alt             link 另外： Drag系统文件
drag-drop-card:拖放卡HTML CSS和JavaScript | SortableJS
04-28
在本文中，我们将深入探讨如何使用HTML、CSS和JavaScript，特别是SortableJS库，来实现一个功能完善的拖放卡系统。这种交互式设计广泛应用于各种Web应用程序，如项目管理工具、在线学习平台和个性化布局系统。 首先...
Drag and Drop using Javascript.zip
11-08
JavaScript中的拖放(Drag and Drop)功能是一种交互式技术，允许用户通过鼠标操作来移动元素，常用于网页上的文件管理、图像布局或者游戏设计等场景。在这个“Drag and Drop using Javascript.zip”压缩包中，可能...
学习drag and drop js实现代码经典之作
12-09
JavaScript中的拖放（Drag and Drop）功能是一种交互设计技术，允许用户通过鼠标或其他输入设备将元素从一处拖动到另一处。在Web开发中，这种功能可以极大地提升用户体验，尤其在构建可操作的用户界面时。`drag and ...
Javascript Drag-Drop and Resize Library-开源
04-26
首先，让我们了解一下什么是拖放（Drag-and-Drop）和缩放（Resize）功能。拖放是一种用户界面技术，允许用户通过鼠标或其他输入设备将一个对象从一处移动到另一处。缩放则是改变元素尺寸的能力，通常是通过点击并...
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
09-28
HTML5中的拖放（Drag and Drop）功能是一个强大的交互特性，允许用户抓取网页上的元素并将其移动到其他位置，从而实现数据交换或界面布局的调整。这一特性在各种应用场景中都非常常见，如文件管理、图像编辑、网页...
drag-and-drop
07-10
拖放 这是一个简单的 Web 应用程序，它要求用户通过 Web 浏览器重建徽标图像。 要使用该应用程序： 克隆 repo ( ) 导航到drag-and-drop/client/目录 用 Chrome 打开index.html 继续开发（在 Windows 中）： 依赖关系 git bash 新产品管理 鲍尔 脚步 克隆 repo ( ) 在 Git Bash 中，导航到drag-and-drop目录 从 Git bash，运行npm cache clean && npm install 从 Git bash 运行bower cache clean && bower install 从 Git bash 运行git checkout -b your-branch-name 在命令行窗口中，导航到drag-and-drop目录 运行grunt test-server 在新
Drop.js-实用的JavaScript下拉弹出层插件
12-11
Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层，可以制作多种弹出层效果。
js原生实现拖放效果（附源码）
weixin_51437539的博客
03-30 522
实现拖放效果有两种，一种是利用drag事件实现，一种是利用鼠标事件实现，我这里采用鼠标事件实现。主要用到的事件：mousemove(鼠标移动),mouseup（鼠标按下）,mousedown（鼠标抬起）当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，在鼠标按下的回调函数里添加鼠标移动的事件；并且添加鼠标抬起事件，为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。：表示listener在添加之后最多只调用一次。如果为true。
原生JS快速实现拖放（drag and drop）效果
web前端开发教程htmlcssjs
12-06 920
拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： HTML HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素： html： <body> <div class="droppable"> <div class="draggable" ...
Drag 和 Drop 在 JavaScript 中的使用
di0808的博客
03-03 267
这一节描述了我们怎么在JavaScript中使用drag and drop. The JavaScript Drag and Drop Wrapper 在进行拖拽的时候我们也许会需要处理一些事件和传递数据，那么这个时候我们就需要用到Drag和Drop了。让我们简明的看一下使用方法。（对照文档有简化） 注意你需要在所用的xul...
js原生拖放
越努力，越幸运！
03-09 2059
HTML5拖放学习总结
vue2.0拖拽排序js用dragstart、drop、dragover来实现
热门推荐
m_uncle的博客
05-25 1万+
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; } .box { width: 60%; hei
playwright 库 elementHandle.dragAndDrop
05-11
`playwright` 库的 `elementHandle.dragAndDrop()` 方法可以用来...上面的代码中，`source` 和 `target` 分别是要拖拽的元素和目标元素，`source.dragAndDrop(target)` 方法会将 `source` 元素拖拽到 `target` 元素上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值