开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js实现拖拽排序

拖拽排序是一种常见的用户界面交互功能，它允许用户通过拖动元素来重新排列列表中的项。使用原生JavaScript实现拖拽排序涉及多个基础概念，包括事件监听、DOM操作和状态管理。以下是详细解答：

基础概念

事件监听：监听鼠标按下、移动和释放等事件。
DOM操作：动态地修改页面上的元素。
状态管理：跟踪当前被拖动的元素及其目标位置。

实现步骤

设置HTML结构：一个包含多个可拖动元素的列表。
添加事件监听器：为每个元素添加mousedown、mousemove和mouseup事件。
处理拖拽逻辑：在mousedown时记录初始位置，在mousemove时更新元素位置，在mouseup时完成排序。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Sorting</title>
<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: grab;
  }
  li.dragging {
    opacity: 0.5;
    position: absolute;
  }
</style>
</head>
<body>
<ul id="sortableList">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
  <li draggable="true">Item 3</li>
  <li draggable="true">Item 4</li>
  <li draggable="true">Item 5</li>
</ul>

<script>
  const list = document.getElementById('sortableList');
  let draggedItem = null;

  list.addEventListener('dragstart', (event) => {
    draggedItem = event.target;
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData('text/html', draggedItem.innerHTML);
    draggedItem.classList.add('dragging');
  });

  list.addEventListener('dragover', (event) => {
    event.preventDefault();
    const overItem = event.target;
    if (overItem && overItem.nodeName === 'LI' && overItem !== draggedItem) {
      const rect = overItem.getBoundingClientRect();
      const relY = event.clientY - rect.top;
      const height = rect.bottom - rect.top;
      const parent = overItem.parentNode;

      if (relY > height / 2) {
        parent.insertBefore(draggedItem, overItem.nextSibling);
      } else {
        parent.insertBefore(draggedItem, overItem);
      }
    }
  });

  list.addEventListener('dragend', () => {
    draggedItem.classList.remove('dragging');
    draggedItem = null;
  });
</script>
</body>
</html>

优势

用户体验：直观且自然的交互方式，提升用户满意度。
灵活性：适用于各种列表和网格布局。
性能：原生实现通常比使用第三方库更轻量且高效。

应用场景

任务管理工具：允许用户重新排列待办事项。
图片编辑器：在画廊视图中重新排序图片。
数据分析仪表板：调整图表或小部件的顺序。

可能遇到的问题及解决方法

拖拽过程中元素跳动：确保在dragover事件中正确计算插入位置。
跨浏览器兼容性：测试不同浏览器下的表现，并做相应调整。
性能问题：避免在事件处理中进行复杂的DOM操作，可以考虑使用虚拟DOM技术。

通过以上步骤和代码示例，可以实现一个基本的拖拽排序功能。根据具体需求，还可以进一步优化和扩展功能。

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

有帮助

没帮助

相关·内容

原生JS实现拖拽缩放元素

今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生...JS实现拖拽缩放元素 #div1 { width: 11px; height: 11px;

5.5K2 0

原生JS实现拖拽位置预览

给大家分享一个拖拽元素时添加预览的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生...JS实现拖拽位置预览 .box { position: absolute; border: 1px

5.3K1 0

原生JS实现拖拽翻书特效

给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下：效果还不错吧，当然还需要两个图片。 1.书本封面。 2.书页实现代码如下，欢迎大家复制粘贴。原生...JS实现拖拽翻书特效 body, h2, p { margin: 0;... js.../index.js"> 以下上面代码中引入的index.js代码，为核心代码。

8K1 0

原生JS拖拽

content="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

原生JS实现可拖拽登录框

分享一个用原生JS实现的可拖拽登录框，效果如下：实现的代码如下：原生...JS实现可拖拽登录框 body { /* 背景图 */ background...//设定鼠标在X和Y方向的初始值为0 var mouseOffsetX = 0; var mouseOffsetY = 0; //是否可拖拽的标记...var isDraging = false; //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动 $('dialogDrag'

4.4K2 0

原生JS实现拖拽鼠标绘画

分享一个用原生JS实现的拖拽鼠标绘画的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴。原生...JS实现拖拽鼠标绘画 div { width: 10px; height: 10px;

3.5K1 0

原生TabControl控件实现拖拽排序功能

在UI交互中，拖拽操作是一种非常简单友好的交互。尤其是在ListBox，TabControl，ListView这类列表控件中更为常见。通常要实现拖拽排序功能的做法是自定义控件。...本文将分享一种在原生控件上设置附加属性的方式实现拖拽排序功能。该方法的使用非常简单，仅需增加一个附加属性就行。...因此，可以通过通过拖拽事件处理拖拽的源位置以及目标位置，并获取到对应位置渲染的数据，然后操作数据集中数据的位置，从而实现数据和UI界面上的顺序更新。...，只需一行代码实现拖拽功能。...对现有项目友好，对于已有项目需要扩展拖拽操作排序功能，无需替换控件。支持多种列表控件扩展。

4402 0

原生JS 实现页面元素的拖动拖拽

实现原理要实现页面元素的拖动，其原理就是根据鼠标的移动实时的更改元素的left 和 top值（当然元素肯定是要做绝对定位的），那么就达到我们要的效果了呀！...e_down.clientX - e_down.target.offsetLeft; var y = e_down.clientY - e_down.target.offsetTop; // 我们想要拖拽元素

5.3K3 0

原生JS 实现元素排序

原生...JS 实现元素排序 * { margin: 0; padding:

3.3K3 0

原生js拖拽指定div

DOCTYPE html> 原生js拖拽效果</title

9.9K2 0

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true...

5596 0

原生JS实现拖拽照片墙，实现照片互换位置

分享一个用原生JS实现的可拖拽照片墙，效果如下：实现代码如下：原生...JS实现拖拽照片墙，实现照片互换位置 * { margin: 0; padding: 0;...#ul1 .active { border: 1px dashed red; } js...jpg" /> 以下是上面代码中引入的move.js

2.6K1 0

JS实现拖拽代码

////html的代码说明： ////定义了一个table，用于测试js拖拽功能 2 3 ////js...，始终更新当前拖拽对象的坐标即可 function mouseMove() { if(null !...function(){ mouseDown(obj)}; obj.onmousemove= function(){ mouseMove()}; } JS...拖拽

8.1K0 0

原生JS实现拖拽进度条显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条显示相应的内容，效果如下：以下是代码实现，欢迎大家复制粘贴。原生...JS实现拖拽进度条显示相应的内容 #parent { width: 400px; height:...//计算滑块的动态left值 var l = oEvent.clientX - disX; //限制拖拽范围...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服

4.4K1 0

原生JS中的拖拽方法继承

给大家分享一个用原生JS编写的拖拽及拖拽方法继承的小Demo，代码如下。原生...JS中的拖拽方法继承 #div1 { width: 100px; height: 100px;...background: yellow; position: absolute; } // 定义拖拽父级对象...; }; // 继承父级对象的原型 LimitDrag.prototype = Drag.prototype; // 修改父级对象上拖拽鼠标移动时的方法

5K2 0

touch实现js拖拽

用touch做js拖拽.记住，touch只在移动端有效. 问题：为什么用定位流做? 因为 ? 问题2：touches[0]是什么意思？是一次只有一个手指触碰....问题4,拖拽怎么做？第一;我举个例子把，好吧. 例如start的时候div在100，100，鼠标在150 150的地点,move的时候在300 300，鼠标在350 350 的位置....（移动后的）最终达到了拖拽的目的. 核心：开始是开始的xy坐标,移动是移动的xy坐标. <!

5.5K5 1

js实现简易拖拽

简易拖拽目录代码实例代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析下载源码链接代码实例 <...x: x, y: y } } })() 代码解析在 document 对象上绑定 mousemove 和 mouseup 事件，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽...拖拽再快都不会超出 document 的范围。

6.3K1 0

js 实现元素拖拽

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

10.1K3 0

原生JS实现各种运动之拖拽碰撞加重心运动

分享一个用原生JS实现的拖拽碰撞加上重心运动的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生...JS实现各种运动之拖拽碰撞加重心运动 #div1 { width: 100px; height:...//执行碰撞运动 startMove(); }; //当鼠标按下的时候，关闭定时器，以免拖拽与碰撞事件冲突...function () { var oDiv = document.getElementById('div1'); //将Y轴增加速度，实现重力运动

1.2K2 0

原生js数组排序

原生js数组排序 js 排序以正序为例（即由小到大） var arr = [0,2,1,4,3,9,6,5,7,8]; // 未排序的数组 var sortArr = null; // 排序后得到的数组...1 sort排序 sortArr = arr.sort(function (a,b) { return a - b }) sort是es3增加的数组方法，大家可以放心使用（支持到ie6），但是数组在原数组上进行排序...- 1){ newArr.push(arr[i]) } } } return newArr; } sortArr = sort(arr); *此方法会重新生成一个数组，并对其进行排序...3 二分法排序 function twoSort (arr) { var len = arr.length; var left = 0, right = 0, point = 0; //定义三个标记位...4 递归二分法排序的两种写法法1 function recursiveSort1(arr) { if (arr.length <= 1) { return arr; }//如果输入数组长度小于等于1

5.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭