jQuery UI drag and drop

geriye de atabilsin, şeker de yiyebilsin

by kuyabiye

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<div class="droppable content-frame center-container">
    <div class="absolute-center center-block item">Drop Here</div>
</div>
<ul class="card-list droppable-back">
    <li><a href="02b-card-list.html">
											<figure class="draggable">
												<img src="http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" width="100" /> 
												<figcaption>1</figcaption>
											</figure>
									</a>
    </li>
    <li><a href="02b-card-list.html">
											<figure class="draggable">
												<img src="http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" width="100" />
												<figcaption>2</figcaption>
											</figure>
									</a>
    </li>
    <li><a href="02b-card-list.html">
											<figure class="draggable">
												<img src="http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" width="100" />
												<figcaption>3</figcaption>
											</figure>
									</a>
    </li>
    <li><a href="02b-card-list.html">
											<figure class="draggable">
												<img src="http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" width="100" />
												<figcaption>4</figcaption>
											</figure>
									</a>
    </li>
    <li><a href="02b-card-list.html">
											<figure class="draggable">
												<img src="http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" width="100" />
												<figcaption>5</figcaption>
											</figure>
									</a>
    </li>
</ul>

SCSS

.content-frame {
    float: right;
    
    width: 200px;
    height: 200px;
    background: #eee;
}
.card-list {
    overflow: hidden;
    width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.card-list li {
    float: left;
    margin: 0;
    padding: 0;
}


figure {
    margin: 0;
}

figcaption {
     position: relative;
   top: -85px;
    left: 20px;
}


.drop-hover {
  -webkit-box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.8);
}  

.drop-active {
  color: #fff;
  -webkit-animation: fade 0.7s forwards;
  -moz-animation: fade 0.7s forwards;
  -o-animation: fade 0.7s forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

@keyframes fade {
  0%   {opacity: 0.8;}
  50%   {opacity: 1;}
  100% {opacity: 0.8;}
}

@-moz-keyframes fade {
  0%   {opacity: 0.8;}
  50%   {opacity: 1;}
  100% {opacity: 0.8;}
}

@-webkit-keyframes fade {
  0%   {opacity: 0.8;}
  50%   {opacity: 1;}
  100% {opacity: 0.8;}
}

.drop-active  {
  color: #fff;

  -webkit-animation: fade 0.7s forwards;
  -moz-animation: fade 0.7s forwards;
  -o-animation: fade 0.7s forwards;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;  
  -o-animation-iteration-count: infinite;
}

.animate-frame {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease; 
  top: 0;
  left: 0; 

  figcaption {
    display: none;
  }
}

JavaScript

var SITE = SITE || {};
/*

drop olduğunda droppable-back'te placeholder clone ekle.
li ve figure eşleştir. drop olduğunda figure'u ona göre geri al.
drop'tan droppable-back'e atınca placeholder'i replace et.
*/
SITE = {
        prefix: {
    	transitionEnd: (function(transition) {
	        var transEndEventNames = {
	                '-webkit-transition' : 'webkitTransitionEnd',
	                '-moz-transition' : 'transitionend',
	                '-o-transition' : 'oTransitionEnd',
	                'transition' : 'transitionend'
	           };
	
	           return transEndEventNames[transition];
	       })(Modernizr.prefixed('transition'))
    },
    drag: {
        selector: '.draggable',
        droppable: '.droppable',
        init: function () {
            var $draggable = $(this.selector),
                $droppable = $(this.droppable);

            $draggable.draggable({
                revert: "invalid",
                scroll: false,
                helper: "clone",
                appendTo: "body",
                containment: "window",
                opacity: 1,
                handle: "img",
                zIndex: 99999,
                start: function (event, ui) {
                    // hide figcaption
                    $(ui.helper).find('figcaption').hide();

                },
                drag: function (event, ui) {},
                stop: function (event, ui) {

                }
            });

            $('.droppable-back').droppable({
                greedy: false,
                activeClass: "drop-active",
                hoverClass: "drop-hover",
                create: function( event, ui ) {
                    
                },
                activate: function( event, ui ) {
                    //ui.draggable.clone().appendTo(ui.draggable.parent());
                },
                deactivate: function( event, ui ) {
                    
                    
                },
                drop: function(event, ui)...