?
在使用jQuery实现可排序列表时,如果无法使用拖拽插件,可以通过以下步骤来实现:
以下是一个示例代码:
<!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>
这段代码实现了一个简单的可排序列表,通过鼠标点击和拖拽来改变列表项的顺序。你可以根据实际需求进行样式和功能的定制。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云