如何用jQuery不能拖拽的项目制作可排序列表
？
在使用jQuery实现可排序列表时，如果无法使用拖拽插件，可以通过以下步骤来实现：
- 创建一个包含列表项的HTML结构，每个列表项都有一个唯一的标识符（例如id或data属性）。
- 使用jQuery选择器选中所有的列表项，并为它们绑定mousedown事件。
- 在mousedown事件处理程序中，记录当前鼠标位置和被点击的列表项。
- 绑定document的mousemove事件，实时更新被拖拽的列表项的位置。
- 在mousemove事件处理程序中，计算鼠标位置的偏移量，并将其应用于被拖拽的列表项的位置。
- 绑定document的mouseup事件，当鼠标释放时，取消mousemove事件的绑定。
- 在mouseup事件处理程序中，根据最终的鼠标位置确定被拖拽的列表项应该插入的位置，并进行相应的DOM操作。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>可排序列表</title>
<style>
.sortable-list {
list-style-type: none;
padding: 0;
}
.sortable-list li {
cursor: move;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul class="sortable-list">
<li data-id="1">列表项1</li>
<li data-id="2">列表项2</li>
<li data-id="3">列表项3</li>
<li data-id="4">列表项4</li>
<li data-id="5">列表项5</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var draggingItem = null;
var draggingOffset = null;
$('.sortable-list li').on('mousedown', function(e) {
draggingItem = $(this);
draggingOffset = {
x: e.pageX - draggingItem.offset().left,
y: e.pageY - draggingItem.offset().top
};
});
$(document).on('mousemove', function(e) {
if (draggingItem) {
draggingItem.css({
left: e.pageX - draggingOffset.x,
top: e.pageY - draggingOffset.y
});
}
});
$(document).on('mouseup', function(e) {
if (draggingItem) {
var targetItem = null;
var targetOffset = null;
$('.sortable-list li').each(function() {
if ($(this).is(draggingItem)) {
return true; // 跳过当前拖拽的列表项
}
var offset = $(this).offset();
var distance = Math.sqrt(
Math.pow(offset.left - e.pageX, 2) +
Math.pow(offset.top - e.pageY, 2)
);
if (!targetItem || distance < targetOffset) {
targetItem = $(this);
targetOffset = distance;
}
});
if (targetItem) {
if (e.pageY > targetItem.offset().top + targetItem.height() / 2) {
targetItem.after(draggingItem);
} else {
targetItem.before(draggingItem);
}
} else {
$('.sortable-list').append(draggingItem);
}
draggingItem.removeAttr('style');
draggingItem = null;
draggingOffset = null;
}
});
});
</script>
</body>
</html>这段代码实现了一个简单的可排序列表，通过鼠标点击和拖拽来改变列表项的顺序。你可以根据实际需求进行样式和功能的定制。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
相关·内容
我使用这个code构建了7个不同的列表。其中的项目可以在这些列表之间自由拖动。现在我想在他们的列表中修复一些项目，这样他们就不能再被拖来拖去了。我怎么能这么做呢？
浏览 13提问于2019-10-01得票数 0
回答已采纳
我做了一个可排序的列表： <li class="line"><a href="#" class="food">milk</a></li> <li
浏览 1提问于2010-03-08得票数 6
我在拖拽列表中有一个项目池，它使用connectToSortable选项连接到一个可排序项目。现在，我想从排序列表中删除一些项目，并将它们移回拖动列表。有点像撤销。假设用户将5个项目移动到排序列表，并决定他/她只需要4个项目，并决定只将不需要的项目从排序列表拖到<e
浏览 0提问于2009-03-24得票数 4
回答已采纳
5回答
我有一个拖拽列表(.field)，你可以拖拽项目到一个可排序列表(.sortlist)中。我这样做是因为我不想以任何方式修改主列表(.field)。它工作得很好，除了我不知道如何操作可排序列表中被删除的字段。我可以通过在droppable ()中的'drop:‘函数中使用以下代码从可拖动对象拖入可放入区域：
$(this).append
浏览 0提问于2010-01-20得票数 7
我对这里的另一个问题的jsFiddle做了一些修改：
function Create() {
jQuery('<li><div style="width:100%;display:block;"><span class="editable">Click to edit</span></div></li>').append
浏览 1提问于2013-11-25得票数 0
1回答
谁能帮我一个忙，使我的拖拽项目到已连接的可排序列表中。我发现如果连接的可排序列表以" overflow :auto“样式溢出div，则无法将可拖动项拖入其中。这是个bug吗？有谁能帮帮我。感谢进阶！title>My MultiSelect</title>
<script type="text/javascript" src=&
浏览 1提问于2010-11-04得票数 0
2回答
我正在尝试创建一个可排序的项目列表。此时，我正在使用jQuery可排序进行此操作。列表是使用Ember视图创建的。当一个项目被删除时，我希望Ember模型能够用新的订单进行更新。在下面的代码中，您可以看到如何将jQuery代码附加到视图元素。拖拽本身工作很好，停止函数也被调用。这就是我想要储存在模型中的东西。不幸的</e
浏览 4提问于2013-10-14得票数 0
回答已采纳
1回答
我使用的是“可排序”列表和“可丢弃”垃圾。问题是拖拽的元素只在中间激活了回收站。如何将“激活区域”扩展到所有元素？
$(".barbox").sortable({}).disableSelection我要所有被拖拽的<
浏览 14提问于2017-02-24得票数 0
回答已采纳
1回答
我有两个列表，一个是拖拽的，另一个是可排序的。当我将项从可拖动项移动到可排序项时，收到span和in span X标记。但问题是，当我稍后在可排序的项目中对项目进行排序时，会再次收到x。然后我有一些类似于1xx的东西，每次你排序新的x(或拖动)。
我该如何解决这个问题呢？
浏览 1提问于2012-11-25得票数 0
回答已采纳
嘿，伙计们，只是想知道是否有什么方法可以替换一个列表项，而不是从一个连接的列表中附加它，然后将替换的项放在连接的列表中，拖拽的项来自于它？jquery是可排序的吗?这对任何人都有帮助！谢谢
浏览 1提问于2010-11-04得票数 0
1回答
在拖动可排序项时更新DOM
、、、、
我有一些应该是可排序的项目列表，这本身并不难用jQuery实现。基于，我已经将这个功能放入了一个角度指令中，以便在重新排序列表中的项目时，我的模型是最新的。我的列表有不同的行颜色，这取决于它是偶数行还是奇数行，以及两个符号，它们根据项目是列表中的第一个还是最后一个而改变颜色。
浏览 2提问于2014-01-08得票数 0
回答已采纳
我在用户排序的表单中有一个可排序的orderd列表，然后在表单中填充一些输入字段，然后提交表单。我正在使用php和jquery可排序插件。如何用其他表单值发送列表或删除文本区域中的可排序项--有什么想法吗？？
浏览 0提问于2018-11-01得票数 0
回答已采纳
1回答
我正在尝试将html附加到我已成功拖动到可排序列表中的项目，但它似乎不起作用。我正在克隆原始项目，并尝试将其附加到ui.helper，但无济于事。这是我到目前为止所知道的：<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script
浏览 0提问于2010-05-05得票数 0
1回答
布局:一个表，其中的行有一个“展开”按钮。expand按钮显示该行的所有子行，所有子行都与父行共享一些公共数据。目标:在父级之间拖动子级；即将某个数据子集移动到另一个子集，并根据新的父级数据自动编辑某些字段。 <
浏览 3提问于2012-08-23得票数 0
4回答
列表中的项可以对应于集合中的记录，并且它们在列表中的位置可以对应于每个记录上的字段(可能是“排名”)，当“停止”事件发生时，必须更新该字段。如果多个用户试图同时拖动和排序相同的列表，会发生什么情况？Meteor需要定制的排序行为吗？
浏览 1提问于2012-11-04得票数 9
我正在尝试使用jQuery UI的可排序功能来使浏览器弹出窗口中的列表项(即window.open()，而不是某种模式)可排序。.);然而，jQuery UI中的定位计算似乎正在变得混乱。拖拽东西不会显示流畅的移动-似乎什么都没有发生，但是点击足够多的东西会在整个页面上移动元素(它们被position: absolute样
浏览 2提问于2012-08-31得票数 1
回答已采纳
我对CSS很在行，但在jQuery方面我做得很差。我们都有自己的局限..。<table> &l
浏览 0提问于2010-07-27得票数 1
2回答
我有可排序的项目列表(li's)。我需要添加可能性，以移动每个项目只向上+1位置索引或向下-1位置索引。(所以每个拖拽项目应该能够移动只有一个步骤向上或向下)。请帮助解决这个问题。谢谢。
浏览 2提问于2016-06-30得票数 0
15回答
我在Firefox3.6IE7-8的jQuery UI 1.7.2可排序列表中遇到了问题。当我向下滚动一点时，helper元素似乎具有与我从鼠标指针向下滚动的相同高度的偏移量，这使得无法看到您最初开始拖动的是哪一项。我该如何解决这个问题呢？如果没有修复，什么是真正好的替代拖拽插件？下面是我的可排序的初始化参数。
浏览 2提问于2010-03-16得票数 56
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
