js拖拽效果 排序
在JavaScript中实现拖拽效果和排序功能，通常会结合HTML5的拖放API和事件处理机制。下面是一个基础的实现概念和示例代码：
基础概念：
- HTML5 Drag and Drop API：提供了一套原生的拖放功能，允许用户在网页上拖动元素，并放置到另一个位置。
- 事件监听：通过监听
dragstart,dragover,dragenter,dragleave,drop等事件来控制拖放过程中的行为。 - 数据传输：使用
DataTransfer对象来存储和传递拖动数据。 - 排序算法：当元素被放置到新位置时，需要重新排列元素的顺序，这通常涉及到数组的排序操作。
优势：
- 用户体验好，直观易用。
- 原生支持，无需额外插件。
- 灵活性高，可以根据需求定制拖放行为。
类型：
- 文件拖放：允许用户将文件从操作系统拖放到网页上。
- 元素拖放：允许用户在网页内部拖动元素，如列表项、图片等。
应用场景：
- 文件上传
- 列表或网格的排序
- 内容编辑器中的元素移动
- 游戏中的道具拾取和放置
示例代码（实现列表项的拖拽排序）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Sorting</title>
<style>
.draggable {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
cursor: move;
}
</style>
</head>
<body>
<ul id="sortableList">
<li class="draggable" draggable="true">Item 1</li>
<li class="draggable" draggable="true">Item 2</li>
<li class="draggable" draggable="true">Item 3</li>
<li class="draggable" draggable="true">Item 4</li>
</ul>
<script>
const sortableList = document.getElementById('sortableList');
let draggedItem = null;
sortableList.addEventListener('dragstart', (event) => {
draggedItem = event.target;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', draggedItem.innerHTML);
});
sortableList.addEventListener('dragover', (event) => {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
return false;
});
sortableList.addEventListener('drop', (event) => {
event.preventDefault();
if (event.target.classList.contains('draggable') && event.target !== draggedItem) {
const temp = event.target.innerHTML;
event.target.innerHTML = draggedItem.innerHTML;
draggedItem.innerHTML = temp;
}
return false;
});
</script>
</body>
</html>在这个示例中，我们创建了一个简单的列表，列表项可以被拖动并放置到其他位置，实现排序效果。当拖动开始时，我们保存被拖动的元素，并在放置时交换元素的内容。
遇到的问题及解决方法：
- 拖放不流畅或不响应：确保所有相关的拖放事件都被正确处理，并且调用了
event.preventDefault()来允许放置。 - 元素排序不正确：在
drop事件中，需要正确地更新DOM元素的顺序，可能需要重新渲染列表或使用文档片段来批量更新。 - 兼容性问题：虽然HTML5 Drag and Drop API得到了广泛支持，但在一些旧浏览器中可能不兼容。可以考虑使用第三方库如jQuery UI Sortable来提供跨浏览器支持。
解决这些问题通常需要调试事件处理代码，确保数据传输正确，并且在必要时更新DOM结构。
相关·内容
在包含10个li元素的列表中，我通过Sortable.js对列表进行排序。但我需要被拖拽的李所在的物品的id。我怎么才能得到它呢？
浏览 6提问于2020-09-25得票数 0
1回答
我希望我的页面看起来像这样：
但是，我正在实现jQuery ui，以利用可拖动(和可排序)功能。所以，如果我不制作.bubblescontainer display: inline-block，我会在拖拽中得到一些可怕的效果。
浏览 2提问于2013-12-17得票数 1
回答已采纳
杂志： 我尝试过的：尝试使用所有不同的清除/浮动方法(强制容器大小)。这些工作也是一样的，但是拖放运动又是不正常的/
浏览 2提问于2013-02-26得票数 1
回答已采纳
在使用可排序的JS时，如何抓取被拖拽和替换的元素？JS： var originalList; handle: '.bars-move',
animation
浏览 130提问于2020-04-12得票数 1
回答已采纳
1回答
一旦拖拽的东西被放到拖放目标中，我希望它能触发我用VB编写的函数或sub。
从我对jquery的了解来看，显然有一种方法可以让我的网页上的元素成为可拖动、可拖放的，或者其他任何东西。
浏览 2提问于2009-05-18得票数 0
回答已采纳
of HTML]</li> <li NumVotes="1">[Alot of HTML]</li>最初排序是很好的(C# LINQ)，我有一个JS过滤器系统，你可以通过它改变显示的项目类型，所以我需要在过滤器改变后重新排序列表。我看过可排序插件，但它似乎只是为了让用户拖
浏览 0提问于2013-01-17得票数 0
回答已采纳
2回答
在火狐和safari中，拖拽的效果非常好。在IE7中，一旦你拖动了一个框，它就可以正常工作了，但之后那个框就不能移动了。我再次尝试将jQuery可排序插件重新应用到任何移动的框中，但似乎不起作用。
浏览 1提问于2009-08-17得票数 1
回答已采纳
1回答
当我试图实现这个目标时，我发现很难控制指针周围的拖动效果，因为它不是一个真正的元素，而是一个图像剪切(我假设)。现在，拖动图像是被拖动元素的副本，包含悬停效果，甚至有来自其父元素的白色背景。(我剪切了两张图片并显示在下面) 那么如何用css或js修改拖拽效果呢？ ? ? 当dragstart事件为trigger时，我为被拖拽的元素添加了一个" is -dragging“类，并改变了被拖拽的元素的样式。但拖动图像保持不变。
浏览 165提问于2019-01-02得票数 1
回答已采纳
我在拖拽列表中有一个项目池，它使用connectToSortable选项连接到一个可排序项目。现在，我想从排序列表中删除一些项目，并将它们移回拖动列表。有点像撤销。假设用户将5个项目移动到排序列表，并决定他/她只需要4个项目，并决定只将不需要的项目从排序列表拖到拖拽列表中。如何在不在排序列表中添加“删除”链接的情况下完成此操作。非常感谢。欲了解更多信息，请访问
浏览 0提问于2009-03-24得票数 4
回答已采纳
3回答
我在一个旋转木马上工作，它工作得很好，唯一的问题是当我拖动图像时，一个重影副本在图像上方悬停。当我拖动图像容器时也会发生这种情况。 我尝试了draggable="false"和user-select: none !important;，但都不起作用。 如何解决这个问题？
浏览 33提问于2019-03-25得票数 1
演示：有什么办法解决这个问题吗？更新的
最近，在搜索是否可以在事件之前更改元素高度时，我遇到了一个有趣的链接( start )，结果是可以用beforeStart事件扩展排序。其结果是：，它仍然有点小问题，但如果你开始从顶部的边缘拖拽，它的工作效果很好。
浏览 2提问于2015-06-02得票数 7
回答已采纳
1回答
我正在尝试用jQuery UI来模仿Scriptaculous中的“重影”功能。我已经找到了演示，可以让DnD正常工作，但在项目被拖动时重影的选项似乎丢失了。使用jQuery可以做到这一点吗？
浏览 1提问于2011-08-25得票数 4
回答已采纳
1回答
拖拽时的悬停效果
、、
我想做一个“悬停”的效果，同时拖动一个对象在其他对象上。可以悬停的对象在iframe内，而用户可以拖动的对象在iframe外。iframe上面也有一个div，这样我就可以在上面拖动对象，而不会出现奇怪的拖拽效果。但正因为如此，:hover、.mouseover()等都不能正常工作。
浏览 0提问于2013-07-01得票数 1
回答已采纳
1回答
我正在尝试创建一个带有自定义适配器的ListView，并添加一个onClickListener和一个拖放功能来对列表进行排序。
浏览 0提问于2015-12-06得票数 0
1回答
谁能帮我一个忙，使我的拖拽项目到已连接的可排序列表中。我发现如果连接的可排序列表以" overflow :auto“样式溢出div，则无法将可拖动项拖入其中。这是个bug吗？有谁能帮帮我。感谢进阶！title>My MultiSelect</title>
<script type="text/javascript" src="http://quasipartikel.at/multiselect/js
浏览 1提问于2010-11-04得票数 0
我做了一个可排序的列表： <li class="line"><a href="#" class="food">milk</a></li> <li class="line"><a href="
浏览 1提问于2010-03-08得票数 6
1回答
是否禁止将列移动到索引0？
、、、、
有没有一种方法可以允许对索引部分(列)进行重新排序(又称setSectionsMovable(true))，但不允许将任何列移动到索引0？我想让列可以通过拖拽来重新排序，但不允许将拖拽的列放在表的最开始。
类似于“如果拖动的列目标索引等于0，则在释放鼠标时，取消拖动并不执行任何操作”之类的语句。这个是可能的吗？
浏览 39提问于2018-07-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
