How to implement a drag-and-drop div from scratch with JavaScript?

Question

It should be a combination of CSS and JavaScript. The steps to do should be:

1. Make it on top of all other elements (which property to specify?)
2. Catch t

Answer 1

You can do this by using following code

$(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); 
    }

/* 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; 
    }

 
 
 
     
 
       
 
    
GeeksforGeeks
  
      
    Drag and drop using jQuery UI Sortable 
      
    

 
      
    
 
        
 
             
        
 
          
        
 
             
        
 
          
        
 
             
        
 
          
        
 
             
        
 
          
        
 
             
        
 
          
        
 
             
        
 
    
 
      
    
 
        Output of ID's of images :