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

📅  最后修改于: 2021-11-25 03:33:31             🧑  作者: Mango

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

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

  • 包括所有必需的 jQuery 和 jQuery UI 库:
  • 用于创建结构的 HTML 代码:
    
    
    
        
            How to create drag and drop
            features for images reorder
            using HTML CSS and jQueryUI?
        
    
           
    
        

    GeeksforGeeks

                 Drag and drop using jQuery UI Sortable            

               
            
                         
                       
                         
                       
                         
                       
                         
                       
                         
                       
                         
        
               
            Output of ID's of images :              
      

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

  • 用于设计结构的 CSS 代码:
    
    
  • 添加功能的JS代码:
    
    

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

  • 程序:
    
    
          
    
        
            How to create drag and drop
            features for images reorder
            using HTML CSS and jQueryUI?
        
          
        
          
        
          
        
              
        
              
        
    
          
    
        

    GeeksforGeeks

               Drag and drop using jQuery UI Sortable            

               
            
                         
                       
                         
               
                         
               
                         
               
                         
               
                         
        
                   
            Output of ID's of images :              
      
  • 输出:

jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。