21xrx.com
2025-04-03 03:07:38 Thursday
文章检索 我的文章 写文章
实现JavaScript分页拖拽功能
2023-06-15 14:46:12 深夜i     11     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事件中实现拖拽操作的交换。

  
  

评论区

请求出错了