--insta1

by Semih Muyaoğlu

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div id="photos">

<img src="https://placehold.co/1920x1920" class="draggable" data-id="4" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="5" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="6" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="7" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="8" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="9" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="10" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="11" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="12" />
<img src="https://placehold.co/1920x1920" class="draggable" data-id="13" />

</div>



<div id="frame">
   <ul>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
      <li class="droppable"></li>
   </ul>
</div>

CSS

body{background:#efefef;}
#photos { float:left; width:300px;}
#photos > img {width:50px; height:50px;}
#frame { margin-left:320px; }
#frame ul { width:450px;  margin:0; padding:5px; list-style:none; float:left;  }
ul li {  background:#fff; border:4px solid #fff; width:132px; height:132px; margin:5px; padding:0; float:left; display:inline-block; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);}
.ui-state-hover { background:url('http://dockphp.com/img/drag-icon.png') no-repeat center center #fff; width:132px; height:132px;}
.ui-state-active{ background:green;}
.deletez { width:140px; height:140px; background:rgba(255,255,255,0);  }
.deletez:hover { width:140px; height:140px; background:rgba(255,255,255,0.3);  }
.deletez:hover span { display:block; background:url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/32/delete.png') no-repeat; width:32px; height:32px; margin: 54px 0 0 54px; position:absolute; }

JavaScript

$(function() {
    $( ".draggable" ).draggable(
        {
            cursor: 'move',
            revert: true,  
            stack: ".droppable"
        }
    );

    $( ".droppable" ).droppable(   
        {
          accept: ".draggable",
          activeClass: "ui-state-hover",
          hoverClass: "ui-state-active",
          drop: function( event, ui ) 
          {
            var itemim = $(ui.draggable).attr("src");
            var id2 = $(ui.draggable).attr("data-id");
            $( this ).css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','center'); 
            $( this ).append("<div class='deletez' data-text='"+ id2 +"'><span></span></div>");
            $( this ).click(function(e) {
              //alert( "Handler for .click() called."+ $(this).find('.deletez').attr("data-text") );
              $(this).css( 'background-image', '' ); 
                $( this ).find('.deletez').remove();
            });    
          }
        }        
    );   
});