实现JavaScript分页拖拽功能 |21xrx.com

实现JavaScript分页拖拽功能

2023-06-15 14:46:12 深夜i 12 0

JavaScript 分页拖拽

分页和拖拽是常见的前端功能，结合起来可以提供更好的用户体验。本文章将介绍如何使用JavaScript实现分页拖拽功能。

首先，我们需要准备一个简单的HTML页面，其中包含分页和拖拽需要的元素。代码如下：

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 « Prev 1 2 3 4 5 6 Next »

这里我们使用了一个ul元素作为列表容器，其中每个li元素表示一个列表项。下面是JavaScript代码，实现了分页和拖拽的功能。

// 分页
var list = document.querySelector('.list');
var itemsPerPage = 2; // 每页显示2条记录
var currentPage = 1;
function showPage(page) {
 var startIndex = (page - 1) * itemsPerPage;
 var endIndex = startIndex + itemsPerPage;
 var lis = list.querySelectorAll('li');
 for (var i = 0; i < lis.length; i++) {
  if (i >= startIndex && i < endIndex) {
   lis[i].style.display = '';
  } else {
   lis[i].style.display = 'none';
  }
 }
}
showPage(currentPage);
document.querySelector('.pagination').addEventListener('click', function(event) {
 event.preventDefault();
 if (event.target.className === 'prev')
  currentPage--;
  else if (event.target.className === 'next') {
  currentPage++;
 } else {
  currentPage = parseInt(event.target.textContent);
 }
 showPage(currentPage);
});
// 拖拽
var dragItem = null;
var container = document.querySelector('.container');
container.addEventListener('dragstart', function(event) {
 dragItem = event.target;
 event.dataTransfer.setData('text', ''); // IE需要这一行代码
 event.target.style.opacity = '0.4';
});
container.addEventListener('dragover', function(event) {
 event.preventDefault();
 var boundingRect = event.currentTarget.getBoundingClientRect();
 var offset = (event.clientY - boundingRect.top) / boundingRect.height;
 if (offset < 0.25)
  event.currentTarget.style.borderTop = '8px solid #aaa';
  event.currentTarget.style.borderBottom = '';
  else if (offset > 0.75)
  event.currentTarget.style.borderTop = '';
  event.currentTarget.style.borderBottom = '8px solid #aaa';
  else
  event.currentTarget.style.borderTop = '';
  event.currentTarget.style.borderBottom = '';
 
});
container.addEventListener('dragleave', function(event)
 event.currentTarget.style.borderTop = '';
 event.currentTarget.style.borderBottom = '';
);
container.addEventListener('drop', function(event) {
 event.preventDefault();
 event.currentTarget.style.borderTop = '';
 event.currentTarget.style.borderBottom = '';
 var boundingRect = event.currentTarget.getBoundingClientRect();
 var offset = (event.clientY - boundingRect.top) / boundingRect.height;
 var newIndex;
 if (offset < 0.25) {
  newIndex = Array.prototype.indexOf.call(list.children, dragItem);
 } else if (offset > 0.75) {
  newIndex = Array.prototype.indexOf.call(list.children, dragItem) + 1;
 } else
  return;
 
 if (newIndex > Array.prototype.indexOf.call(list.children, dragItem))
  newIndex--;
 
 list.insertBefore(dragItem, list.children[newIndex]);
 dragItem.style.opacity = '';
 dragItem = null;
});

代码中首先定义了一个showPage函数，根据当前页码显示列表项。然后监听分页导航的点击事件，更新当前页码并调用showPage函数显示列表项。

接下来是拖拽功能的实现。使用dragstart事件标记拖拽的元素，dragover事件实现拖拽过程中指示拖拽操作的位置，在drop事件中实现拖拽操作的交换。

上一篇: idea打包java可执行jar包

下一篇: Java面试必问的问题及解析

评论区

相似文章