JSFiddle - React, Tailwind, and code Playground

Angular, JQuery drag Directive with containment + CSS3 entry placement

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/ilyavolodin/jquery-ui-extras/master/jquery.ui.rotatable.js"></script>
<div ng-controller="Ctrl" class="wrapper">
 
 <div dragger class="box topme">Box</div>
 
  <div dragger class="box1 topme">Box</div>
 
 <div class="slide-container">
    <img dragger class="slide1 topme" src="http://placehold.it/100x100/343edd/ffffff/&text=drew">
    <img dragger class="slide2 topme" src="http://placehold.it/100x100/3edde3/ffffff/&text=drew1">
    <img dragger class="slide3 topme" src="http://placehold.it/100x100/432223/ffffff/&text=MOVER">
  </div>

  <img dragger id="slide" class="topme" src="http://placehold.it/100x100/transparent/ffffff/&text=TEST">

  <img dragger id="slide1" class="topme" src="http://placehold.it/100x100/transparent/ffffff/&text=drew">

</div>

CSS

.wrapper {
      width: 90vw;
      height: 90vh;
      border: 1px solid black;
      display: block;
      overflow: hidden;
       background-color: #ffffff;
   background-image: linear-gradient(rgba(232, 232, 232, 0.5) 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px), linear-gradient(90deg, rgba(232, 232, 232, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 232, 232, 0.7) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 58px, transparent 58px), linear-gradient(90deg, rgba(232, 232, 232, 0.7) 3px, transparent 3px, transparent 58px, rgba(232, 232, 232, 0.7) 58px);
   background-size: 15px 15px, 60px 60px, 15px 15px, 60px 60px, 60px 60px, 60px 60px;
    }
    

 
    #slide {
      margin: 5% 5%;
      position: absolute;
      background: coral;
      //  -webkit-animation: slide 0.5s ease-out;
      -webkit-animation-delay: 0.5s;
      //  animation: slide 0.5s ease-out;
      animation-delay: 0.5s;
      background-size: cover;
      transition: all 0.5s ease 0s;
    }
    
    @-webkit-keyframes slide {
      0% {
        left: -34%;
      }
      100% {
        left: 0%;
      }
    }
    
    @keyframes slide {
      0% {
        left: -34%;
      }
      100% {
        left: 0%;
      }
    }
    /* - - - -*/
    
    .slide-container {
      position: relative;
      float: right;
      height: 90vh;
      width: 90vw;
    }
    
    .slide-container img {
      position: absolute;
      top: 0;
      left: 0;
      height: 150px;
      width: auto;
      opacity: 0;
    }
    
    .slide1 {
      -webkit-animation: fade1 2s;
      -webkit-animation-fill-mode: forwards;
    }
    
    .slide2 {
      -webkit-animation: fade 4s 2s;
      -webkit-animation-fill-mode: forwards;
    }
    
    .slide3 {
      -webkit-animation: fade2 4s 2s;
      -webkit-animation-fill-mode: forwards;
    }
    
    @-webkit-keyframes fade {
      0% {
        opacity: 0;
        margin-left: 1%
      }
      10%...

JavaScript

var app = angular.module("drewApp", []);


app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };
});

app.directive('dragger', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, elem, attrs) {
   
      elem.draggable({
        containment: ".wrapper",
        cursor: "move",
        stack: ".topme",
        opacity: 0.7
      });
             elem.rotatable();
      $("#slide, .box").addClass("moveme");
            $("#slide1, .box1").addClass("moveme1");
    }
  };
});