如何使用 HTML CSS 和 jQueryUI 创建用于重新排序图像的拖放功能？

给定一个图片库，任务是通过拖放重新排列列表或网格中的图像顺序。 jQuery UI 框架提供了一个sortable()函数，它有助于使用鼠标对列表项重新排序。有了这个功能，列表项就可以互换了。 jQuery UI 提供带有默认可拖动属性的 sortable()函数。 HTML 文档中的所有列表元素都可以互换并重新排序以进行显示。用户可以借助鼠标将元素拖放到新位置。其他元素会自行调整以适应列表。

创建结构：在本节中，我们通常包括所需的 jQueryUI 链接和库。此外，我们将创建一个基本的图片库，我们将在其中执行拖放功能以重新排序库列表。

• 包括所有必需的 jQuery 和 jQuery UI 库：

  
  
  

• 用于创建结构的 HTML 代码：

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

设计结构：在本节中，我们将设计预先创建的结构并通过添加 JavaScript 代码来添加拖放功能。

• 用于设计结构的 CSS 代码：

• 添加功能的JS代码：

      $(function() {
          $("#imageListId").sortable({
              update: function(event, ui) {
                      getIdsOfImages();
                  } //end update         
          });
      });
    
      function getIdsOfImages() {
          var values = [];
          $('.listitemClass').each(function(index) {
              values.push($(this).attr("id")
                          .replace("imageNo", ""));
          });
          $('#outputvalues').val(values);
      } 

最终解决方案：在本节中，我们将结合上述所有部分代码并实现我们的任务，您可以执行拖放操作以重新排序图库中的图像。

• 程序：

        
  
      
          How to create drag and drop
          features for images reorder
          using HTML CSS and jQueryUI?
      
        
      
        
      
      
        
      
      
            
      
    
          /* text align for the body */
          body {
              text-align: center;
          }
    
          /* image dimension */
          img{
              height: 200px;
              width: 350px;
          }
    
          /* imagelistId styling */
          #imageListId
          { 
          margin: 0; 
          padding: 0;
          list-style-type: none;
          }
          #imageListId div
          { 
              margin: 0 4px 4px 4px;
              padding: 0.4em;             
              display: inline-block;
          }
    
          /* Output order styling */
          #outputvalues{
          margin: 0 2px 2px 2px;
          padding: 0.4em; 
          padding-left: 1.5em;
          width: 250px;
          border: 2px solid dark-green; 
          background : gray;
          }
          .listitemClass 
          {
              border: 1px solid #006400; 
              width: 350px;     
          }
          .height{ 
              height: 10px;
          }
      
            
      
          $(function() {
              $( "#imageListId" ).sortable({
              update: function(event, ui) {
                  getIdsOfImages();
              }//end update         
              });
          });
            
          function getIdsOfImages() {
              var values = [];
              $('.listitemClass').each(function (index) {
                  values.push($(this).attr("id")
                          .replace("imageNo", ""));
              });
                
              $('#outputvalues').val(values);
          }
      
  
        
  
      GeeksforGeeks
        
      Drag and drop using jQuery UI Sortable
        
      
        
      
          
              
          
            
          
              
          
    
          
              
          
    
          
              
          
    
          
              
          
    
          
              
          
      
            
      
          Output of ID's of images : 
          
      
  
    

• 输出：