可排序的js根据拖动的元素更改数组
是指通过JavaScript实现可拖拽排序的功能，并根据拖动的元素更改数组的顺序。以下是一个完善且全面的答案：
可排序的js根据拖动的元素更改数组是一种在前端开发中常见的交互功能，通过这种功能可以使用户可以自定义排序列表或拖动元素改变元素在数组中的位置。
实现这种功能的方式可以使用一些第三方库，如jQuery UI的sortable插件或者Draggable.js等。这些库提供了一些方法和事件来实现可排序的功能。以下是一种常见的实现方式：
- 引入相应的库文件。可以从官方网站或者CDN获取相应的库文件，并在HTML文件中引入。
- 创建一个包含可拖拽元素的列表。可以使用HTML的ul和li元素来创建一个排序列表。
- 初始化可排序功能。使用库提供的初始化方法，将列表元素设置为可排序。
- 监听排序事件。通过监听库提供的排序事件，可以在拖动元素后触发相应的事件处理函数。
- 更新数组顺序。在排序事件处理函数中，可以通过获取排序后的元素顺序，从而更新原始数组的顺序。
下面是一个示例代码，使用jQuery UI的sortable插件实现可排序的功能：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; }
li { margin: 0 0 5px; padding: 5px; font-size: 1.2em; height: 30px; }
</style>
<script>
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
// 获取排序后的元素顺序
var sortedArray = [];
$("#sortable li").each(function() {
sortedArray.push($(this).text());
});
// 更新数组顺序
// ...
}
});
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
</body>
</html>在代码示例中，ul元素的id设置为"sortable"，表示该列表可以进行排序。通过监听update事件，可以在排序完成后触发事件处理函数。在事件处理函数中，可以通过遍历排序后的li元素，获取排序后的元素顺序，并将其更新到数组中。
至于具体应用场景，可排序的功能在各种需要用户自定义排序的列表或拖放元素进行交互的应用中都有广泛的应用，例如任务列表的排序、图像库中图片的排序等。
关于推荐的腾讯云相关产品，腾讯云提供了一系列云计算服务，包括云服务器、云数据库、云存储等。对于可排序的功能，可以使用腾讯云的云原生产品，如腾讯云容器服务（Tencent Kubernetes Engine，TKE）来部署和管理应用程序，或者使用腾讯云的对象存储服务（Tencent Cloud Object Storage，COS）来存储用户上传的文件等。具体的产品介绍和相关链接可以通过腾讯云官方网站获取。
请注意，这里并没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，如有需要了解其他品牌商的相关产品和服务，可以前往官方网站进行查询。
相关·内容
我有一个任务列表，我希望能够拖动它们并让sortOrder数组更改为新的顺序，这是我想出来的，但它不能正常工作，有时我得到了顺序，有时我没有。例如，如果我将第一个元素拖到第二个位置，它可以工作，但如果我拖到最后一个位置，它就不能...另外，如果我把它拖上去，通常都是错的..我做错了什么？或者，这可以通过其他方式来完成？我需要跟踪上一个/下一个id，因为在sortOrder中可能有其他不可见的元素，所以我需要在可见元素
浏览 18提问于2021-10-25得票数 0
回答已采纳
问题:每当我在启动后更改可排序CursorAt上的值时，新值就不会更新排序。disableSelection(); cursorL = 50;});
是一个可行的例子但是，单击按钮并更改cursorL值后，可排序的值将不会随之<e
浏览 1提问于2015-08-21得票数 1
回答已采纳
经过一些研究，我发现了一个小插件，它可以帮助连接KO和JqueryUi的sortable，你可以在这里阅读到它：
该插件可以很好地更新可观察数组的顺序，但我还需要根据元素在数组中的位置刷新元素的一些值。我尝试在每次排序后更新整个数组，我注意到一个奇怪的行为:虽然UI保持不变，但如果我将数组发送到JSON，它会用正确的值更新！你可以在这里找到我<e
浏览 6提问于2012-06-05得票数 0
回答已采纳
1回答
当我将一个元素从可拖动元素拖放到可排序元素中时，如何更改可排序元素下拉的空间量，以便为可拖动元素的拖放腾出空间？现在，它默认为我的可排序句柄的大小(16px)，但我想将其设置为100px左右。
浏览 0提问于2011-08-11得票数 1
回答已采纳
2回答
我有两个街区，“可拖”和“可排序”。在“可拖”的内部，我没有几个可以拖动到“可排序”的项目。$(".sortableList").sortable({
placeholder: '
浏览 7提问于2014-09-29得票数 0
回答已采纳
我正在寻找一种可能性，可以在可排序的jQuery列表中更改元素的CSS类，同时将其拖动到特定元素上。例如，如果我将可排序列表的元素拖动到特定图层上，则拖动层应该会更改背景颜色，但仍然停留在拖动模式。
浏览 1提问于2011-03-23得票数 1
回答已采纳
我有一个draggable和两个空的可排序元素。通过使用connectWithSortable，我应该能够将可拖动元素连接到可排序元素。但是，当可拖动元素第一次被拖到可排序元素中时，它不会连接到该元素。只有在第二次拖动时，它才会连接。如果我使用CSS将可排序元素的</
浏览 15提问于2020-07-29得票数 0
回答已采纳
我正在尝试将jQueryUI拖放元素连接到可排序元素，并始终将助手附加到主体中。当我将拖放元素拖到可排序元素时，助手将被插入到sortable元素中。即使可排序元素在拖动时都附加到body元素。helper: "clone", appendTo: doc
浏览 0提问于2014-12-18得票数 4
回答已采纳
2回答
我的问题是:每当拖动可排序列表中的元素( portlet div)时，我需要在实际拖动过程开始之前执行一些操作(根据我在启动START事件之前的理解)。然而，每当我调用我的方法(类似这样的东西)它按预期工作，只是在可排序的启动事件触发之前计
浏览 3提问于2012-03-21得票数 14
回答已采纳
情况：在页面顶部有可拖动的元素，在iframe中有一些可排序的持卡器。当我尝试拖动元素到iframe时，它工作得很好。但是，当iframe向下滚动，我开始拖动可拖元素时，它会连接到iframe中的第一个可排序支架，而不是连接到当前位于iframe可见部分顶部的可排序支架。<e
浏览 6提问于2015-12-27得票数 9
我有一个可以拖放到可排序列表中的可拖动元素。理想情况下，我希望防止可拖动事件在可排序中创建占位符，如果可排序已包含与可拖动的类名匹配的元素。在将可拖动对象放置到可排序列表中后，使用以下命令删除该可拖动对象
浏览 2提问于2010-08-17得票数 2
回答已采纳
我有一个可排序的列表和一些可拖动的元素，它们是我用jquery-ui创建的。我希望将可拖动的元素拖到可排序列表中，这样就可以将它们添加到最后一个列表中。我已经使用了"connectToSortable“选项，但是当我将元素拖到可排序列表上时，没有任何反应。有什么限制吗？
可拖
浏览 0提问于2015-05-26得票数 0
我有一系列嵌套的可排序元素，显示了z索引的一些奇怪行为。看起来，后面的问题只出现在列表后面的元素上。所以我可以拖动到“更高”的排序，但拖动到“较低”排序和拖动元素突然后面。详细信息：
给定可<
浏览 1提问于2011-09-29得票数 7
回答已采纳
我正在使用firebase firestore和Vue.js创建一个简单的任务列表web应用程序。一切看起来都很好，直到我试着做任务重新排序功能，这把项目变成了噩梦。通过使用基于著名的sortable.js库的Vue Draggable库，我可以很容易地在应用程序端实现重新排序功能。基本上，我有一个v-表示迭代我的任务的代码，就像这样： &l
浏览 1提问于2020-06-13得票数 0
我的jquery ui可排序可以很好地工作，但我的可排序元素中还有其他交互式元素。为了防止在与可排序div中的元素交互时意外排序，我想以某种方式使可排序项的拖动移动仅在拖动可排序项中的某个元素时发生，例如
浏览 2提问于2011-12-18得票数 77
回答已采纳
我有一个很长的嵌套列表，我对其应用了overflow-y:Auto，每个元素都附加了可排序的小部件。现在我们面临的问题是，可拖动的山墙元素离开了滚动条容器，这是不可取的，我确实理解位置设置为绝对，z-Index设置为1000，我也理解在拖动元素时，它会考虑父元素的高度，它让我向上拖动-仅到计算的</em
浏览 0提问于2014-03-31得票数 0
我已经构建了一个集合视图，它允许我对元素进行拖动和重新排序。某些元素(在我的例子中，前三个和后两个)不应该是可重新排序的，即元素0必须始终保持在我的模型数组中的位置0，等等。collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool
此函数知道这
浏览 2提问于2020-05-18得票数 0
2回答
我有一个要拖入可排序元素的可拖动元素。但是，我不能直接将可拖动对象拖到可排序列表中的第一个位置。只有当我移出第一个元素，然后回到第一个元素之前的位置时，这才是可能的。看看这个提琴：谢谢你<e
浏览 1提问于2012-09-27得票数 1
2回答
我创建了一个小提琴作为演示：$('#scroller').scroll(function() {});标记<div class="items">
<div class="item">One</
浏览 5提问于2014-08-14得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
