开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › JavaScript拖拽效果演示和说明
返回列表 发新帖
查看: 72|回复: 3

[文章教程] JavaScript拖拽效果演示和说明

[复制链接]
xuanxiao 发表于 2025-1-2 11:43:47 | 显示全部楼层 |阅读模式
HTML5 提供了原生的拖放功能，允许用户在网页上通过鼠标或其他指针设备拖动和放置元素。这组 API 可以应用于各种 HTML 元素

drag事件：在元素被拖动的过程中持续触发。可以用于实时更新一些视觉效果等，不过在实际应用中使用相对较少。

dragend：当拖动操作结束时触发，不管是成功放置还是中途取消。例如，可以在这个事件中清理一些在拖动过程中设置的临时状态。

dragenter：当被拖动的元素进入一个有效的放置目标时触发

dragover：当被拖动的元素在放置目标元素上方移动时触发。和dragenter一样，通常需要调用e.preventDefault()来允许放置操作。

drop：当被拖动的元素被放置到目标元素上时触发。这个事件用于处理放置后的逻辑，例如获取被拖动元素携带的数据并进行相应的操作

dragleave：当被拖动的元素离开一个放置目标时触发。例如，可以在这个事件中恢复放置目标元素在被拖动元素进入之前的视觉状态
ezgif-1-cb13258850.gif

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>js拖拽</title>
  8.     <style>
  9.         .content {
  10.             display: flex;
  11.             width: 50%;
  12.             margin: 50px auto;
  13.         }

  15.         .box1 {
  16.             box-sizing: border-box;
  17.         }

  19.         .item {
  20.             width: 150px;
  21.             height: 40px;
  22.             color: #fff;
  23.             background-color: rgb(63, 127, 255);
  24.             margin: 0 0 10px 0;
  25.             text-align: center;
  26.             line-height: 40px;
  27.             cursor: pointer;
  28.         }

  30.         .box2 {
  31.             margin-left: 30px;
  32.         }

  34.         tr {
  35.             width: 100%;
  36.         }

  38.         td {
  39.             width: 150px;
  40.             height: 40px;
  41.         }
  42.     </style>
  43. </head>

  45. <body>
  46.     <div class="content">
  47.         <div class="box1">
  48.             <div draggable="true" class="item">数据一</div>
  49.             <div draggable="true" class="item">数据二</div>
  50.             <div draggable="true" class="item">数据三</div>
  51.             <div draggable="true" class="item">数据四</div>
  52.             <div draggable="true" class="item">数据5</div>
  53.         </div>

  55.         <div class="box2">
  56.             <table border="1">
  57.                 <tr>
  58.                     <td></td>
  59.                     <td></td>
  60.                     <td></td>
  61.                 </tr>
  62.                 <tr>
  63.                     <td></td>
  64.                     <td></td>
  65.                     <td></td>
  66.                 </tr>
  67.                 <tr>
  68.                     <td></td>
  69.                     <td></td>
  70.                     <td></td>
  71.                 </tr>
  72.                 <tr>
  73.                     <td></td>
  74.                     <td></td>
  75.                     <td></td>
  76.                 </tr>
  77.                 <tr>
  78.                     <td></td>
  79.                     <td></td>
  80.                     <td></td>
  81.                 </tr>
  82.                 <tr>
  83.                     <td></td>
  84.                     <td></td>
  85.                     <td></td>
  86.                 </tr>
  87.             </table>
  88.         </div>
  89.     </div>
  90. </body>


  93. <script>
  94.     // 实现拖拽左侧的div到右侧的表格中
  95.     var items = document.querySelectorAll('.item');
  96.     var tds = document.querySelectorAll('td');
  97.     var index = 0; // 记录当前拖拽的元素

  99.     // 给左侧的div添加拖拽事件
  100.     for (var i = 0; i < items.length; i++) {
  101.         // 给每个元素添加索引
  102.         items[i].ondragstart = function (e) {
  103.             e.dataTransfer.setData('text/plain', e.target.innerHTML);
  104.             e.dataTransfer.setData('text/plain', e.target.innerHTML);
  105.         }
  106.         // 记录当前拖拽的元素
  107.         items[i].ondragend = function (e) {
  108.             e.dataTransfer.setData('text/plain', e.target.innerHTML);
  109.             e.dataTransfer.setData('text/plain', e.target.innerHTML);
  110.         }
  111.     }

  113.     // 给右侧的td添加拖拽事件
  114.     for (var i = 0; i < tds.length; i++) {

  116.         // 这一步是必须的，阻止默认行为 否则ondrop事件不会触发
  117.         tds[i].ondragover = function (e) {
  118.             e.preventDefault();
  119.             // 已经有一个元素放置到td上了，则不执行
  120.             if (e.target.innerHTML) {
  121.                 return;
  122.             }
  123.             // 给当前td添加一个背景色 移动到td上时显示
  124.             e.target.style.backgroundColor = 'blue';
  125.         }

  127.         // 当鼠标离开td时，清除背景色
  128.         tds[i].ondragleave = function (e) {
  129.             // 已经有一个元素放置到td上了，则不执行
  130.             if (e.target.innerHTML) {
  131.                 return;
  132.             }
  133.             e.target.style.backgroundColor = '';
  134.         }

  136.         // ondrop事件可以获取到最终放置的元素
  137.         tds[i].ondrop = function (e) {
  138.             e.preventDefault();

  140.             // 已经有一个元素放置到td上了，则不执行
  141.             if (e.target.innerHTML) {
  142.                 return;
  143.             }

  145.             // 获取当前拖拽元素的值
  146.             var data = e.dataTransfer.getData('text/plain');
  147.             // 设置给当前td的值
  148.             e.target.innerHTML = data;
  149.             console.log(e.target.innerHTML);

  151.             // 获取当前被拖拽的元素的样式，然后添加给右侧的td
  152.             var style = window.getComputedStyle(items[index]);
  153.             e.target.style.backgroundColor = style.backgroundColor;
  154.             e.target.style.color = style.color;
  155.             e.target.style.border = style.border;
  156.             e.target.style.width = style.width;
  157.             e.target.style.height = style.height;
  158.             e.target.style.textAlign = style.textAlign;
  159.         }
  160.     }
  161. </script>

  163. </html>
复制代码
ASP币如何冲？请看这里
回复

使用道具 举报

一往情僧 发表于 2025-1-3 08:22:26 | 显示全部楼层
有新帖，我必顶~
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

熊瑞 发表于 2025-1-3 09:57:03 | 显示全部楼层
不错！支持一下！
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

刘刘刘 发表于 2025-1-12 19:10:53 | 显示全部楼层
拖进可以，播出大家谁研究，如果与ASP数据库交互有知道的朋友么，学习一下。感谢分享。
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号