--insta2

by Semih Muyaoğlu

HTML

<div id="photos">
<img src="https://i.pinimg.com/originals/60/cf/db/60cfdb96744a9cc380f96b23b1d7550d.jpg" class="draggable" data-id="1" />
<img src="https://listelist.com/wp-content/uploads/2018/10/katy.jpg" class="draggable" data-id="2" />



<img src="https://static1.squarespace.com/static/55314042e4b048e6fa97b3dc/t/5aa95b4924a69460f54de046/1521048453077/instagram-takeover-tips" class="draggable" data-id="3" />
<img src="https://static1.squarespace.com/static/546ffe37e4b035e9c277b5d4/t/57c67ca520099e737dc47737/1472625855548/Valerie" class="draggable" data-id="4" />
<img src="https://img-s2.onedio.com/id-595779ab7748bb352453d0eb/rev-0/w-500/s-25db7ccea589da426ab6d53625250ef7f0c2db28.jpg" class="draggable" data-id="5" />
<img src="https://static1.squarespace.com/static/5717bfdf20c6470ae10aecb7/t/5984c146d7bdcee0bc9911e2/1501872459633/" class="draggable" data-id="6" />
<img src="https://images.bursadabugun.com/galeriler/2018/03/21/46634-instagram-in-guzel-hostesleri-5ab255e6207d6.jpg" class="draggable" data-id="7" />
<img src="http://cdn.liquor.com/wp-content/uploads/2014/07/slideshow-instagram-to-follow-brottle.jpg" class="draggable" data-id="8" />
<img src="https://www.habernediyor.com/images/album/2_231.jpg" class="draggable" data-id="9" />





<img src="https://media1.popsugar-assets.com/files/thumbor/kL_fFuMfkoCRsXe2byN1LmiF8DQ/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2015/09/01/923/n/1922153/c6b1b765_edit_img_image_15741499_1440523840/i/Halloween-Makeup-Artists-Instagram.png" class="draggable" data-id="10" />
<img src="https://starngage.com/wp-content/uploads/2015/07/Instagram-Junanto-Herdiawan.png" class="draggable" data-id="11" />
<img src="https://img2.thejournal.ie/inline/1907666/original/?width=500&version=1907666" class="draggable" data-id="12" />
<img src="http://www.ifairer.com/article_image/5-television-celebs-rock-on-instagram-this-week-karan-kundra-4-64262-karan-kundra.jpg" class="draggable" data-id="13"...

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; background:#efefef;  }
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);}

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 ).find('#0001').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','0 0'); 
              $( this ).find('#0002').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-140px 0'); 
              $( this ).find('#0003').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-280px 0');

              $( this ).find('#0004').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','0 -140px'); 
              $( this ).find('#0005').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-140px -140px'); 
              $( this ).find('#0006').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-280px -140px'); 
			  
			  $( this ).find('#0007').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','0 -280px'); 
              $( this ).find('#0008').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-140px -280px'); 
              $( this ).find('#0009').css( 'background-image', 'url(' + itemim+ ')' ).css('background-repeat','none').css('background-position','-280px -280px'); 
                     
          }
        }     ...