JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<img src="http://placehold.it/79x79" class="dragImg" id="img1" />
          <img src="http://placehold.it/80x80" class="dragImg" id="img2" />
             

<div>

<div class="gallery" id = "FOLDER1"> </div>
<div class="gallery" id = "FOLDER2"> </div>
<div class="gallery" id = "FOLDER3"> </div>
<div class="gallery" id = "FOLDER4"> </div>
</div> 
<p>
Box 1
</p>
<div id="FOLDER1_info" class="inf_box"> 
</div>
Box 2
<div id="FOLDER2_info"  class="inf_box"> 
</div> 

<a href="#" id="change">Change</a>

CSS

.gallery {
    width: 80px;
    min-height:90px;
    height: auto;
    border: 1px solid black;
    float:left;
    margin:5px 5px 0 0 ;
    padding:5px;
}
.inf_box{float:none; margin:10px; display:inline-block;width:100%; position:relative}

JavaScript

$(document).ready(function() {
	$(".dragImg").draggable({  
        helper: function() {
            return $(this).clone().appendTo('body').css({
                'zIndex': 5
            }); 
        },
        cursor: 'move',
        containment: "document"
    });

    $('.gallery,img').droppable({ 
        accept: '.dragImg',
        drop: function(event, ui) {
            if (!ui.draggable.hasClass("dropped")){ 
            		var image =$(ui.draggable).attr('src');
            		var img_id =$(ui.draggable).attr('id');
    				 		var folder =$(this).attr('id');
                $('#'+folder+'_info').append(image+',')
                $(this).append($(ui.draggable).clone().addClass("dropped , clone").draggable().attr('data-folder', folder) );
		            $('#'+img_id).css({'opacity':'.5'}).removeClass('dragImg'); 
            }else{
            alert('already dropped')
            		var img_id =$(ui.draggable).attr('id');
            		var image =$(ui.draggable).attr('src');
            		var folder =$(ui.draggable).attr('data-folder');
                alert(folder)
                var el = $('#'+folder+'_info');
									el.html(el.text().replace(image, ""));
                alert(image)
             $(ui.draggable).remove();
             $('#'+img_id).css({'opacity' :'1'}).addClass('dragImg') 
            }
            }
        });
    });
    
    $('#change').click(function(event){
    alert('clik')
    alert($('#FOLDER1_info').text())
    event.preventDefault();
    })