21xrx.com
2024-12-23 00:45:44 Monday
登录
文章检索 我的文章 写文章
实现JavaScript分页拖拽功能
2023-06-15 14:46:12 深夜i     --     --
JavaScript 分页 拖拽

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

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




 
 

 
    
  
      
    
  
  • Item 1
    • 
  
      
    
  
  • Item 2
    • 
  
      
    
  
  • Item 3
    • 
  
      
    
  
  • Item 4
    • 
  
      
    
  
  • Item 5
    • 
  
      
    
  
  • Item 6
    • 
  
     
    
 

 
 

这里我们使用了一个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事件中实现拖拽操作的交换。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复