来源 | https://www.geeksforgeeks.org/

给定一个图像库，要求通过拖放来重新排列列表或网格中图像的顺序。jQuery UI框架提供了sortable（）函数，该函数有助于通过使用鼠标对列表项进行重新排序。使用此功能，列表项可以互换。

jQuery UI提供具有默认可拖动属性的sortable（）函数。HTML文档中的所有列表元素都是可以互换的，并可以重新排序以进行显示。

用户可以借助鼠标将元素拖放到新位置。其他元素会自行调整以适合列表。

首先，我们需要创建一个基本的图片库，在其中我们将执行拖放功能以对图片库列表进行重新排序。包括所需的jQuery UI链接和库。

• 包括所有必需的jQuery和jQuery UI库，代码如下：

HTML代码：

              
GeeksforGeeks
      Drag and drop using jQuery UI Sortable     
    
     
    
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
     
    
     
    
         
     Output of ID's of images :          
          
    
  

CSS代码：

最后，我们通过添加JavaScript代码来添加拖放功能。

JS代码：

最后，我们将整合以上所有的代码，然后，在其中执行拖放操作以对图库中的图像进行重新排序。

• 最终代码如下：

           
                               
GeeksforGeeks
     Drag and drop using jQuery UI Sortable     
    
     
    
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
         
     
             
               
     
     
    
     
    
         
     Output of ID's of images :          
          
    
  

最终输出效果：

本文完~