Drag And Drop Animations

in this blog we will guide you about drag and drop animation

How to set Drag position

is it very simple you just make unordered list in html and set classes then set unique id because when we drop it so we id to set on drop method then we are doing some code in css then we make drag method in jquery

How to set Drop position

now we want one more unordered list in html for making drop position where we set our drag value then make some conditions for drag value and using some jquery libraries


below i have show you example of this image code


Html Code

<div class="container">

  <h1> Drag and Drop Animation </h1>

  <ul class="draggableList boxinglist">

    <li class="draggable" id="boxingone"> </li>
    <li class="draggable" id="boxingtwo"> </li>
    <li class="draggable" id="boxingthree"> </li>
    <li class="draggable" id="boxingfour"> </li>

  </ul>


  <ul class="droppableList boxerlist">

    <li class="dropable" id="boxerone"> Red <span class="message"> </span> </li>
    <li class="dropable" id="boxertwo"> Black </li>
    <li class="dropable" id="boxerthree"> Orange </li>
    <li class="dropable" id="boxerfour"> Blue </li>

  </ul>


</div>

Css Code

<style type="text/css">
	.container {
  width: 65%;
  height: 500px;
  border: 2px solid silver;
  margin: 0 auto;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  padding: 50px;
}

.boxinglist,
.boxinglist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.draggable {
  width: 75px;
  height: 75px;
  border-radius: 50px;
  margin: 10px;
  list-style: none;
  display: inline-block;
}

.drapCircle {
  width: 75px;
  height: 75px;
  border-radius: 50px;
  border: 1px solid silver;
  margin: 0 auto;
}

.dropable {
  border: 2px solid silver;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  text-align: center;
  color: silver;
  line-height: 100px;
  letter-spacing: 2px;
  list-style: none;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.feedback {
  width: 150px;
  margin-left: 10px;
  margin-right: 10px;
  list-style: none;
  display: inline-block;
}

.dropable header {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid silver;
}

#boxingone {
  background: black;
}

#boxingtwo {
  background: #3498db;
}

#boxingthree {
  background: red;
}

#boxingfour {
  background: #e67e22;
}

.message {
  color: green;
  transition: 2s;
}

.colorChange {
  background: red;
  color: red;
  border: 2px solid red;
  transition: 2s;
}

.colorChangeGreen {
  background: black;
  color: black;
  border: 2px solid black;
  transition: 2s;
}

.colorChangeBlue {
  background: #3498db;
  color: #3498db;
  border: 2px solid #3498db;
  transition: 2s;
}

.colorChangeOrange {
  background: #e67e22;
  color: #e67e22;
  border: 2px solid #e67e22;
  transition: 2s;
}

.bounce {
  animation-name: bounce;
  -webkit-animation-name: bounce;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
  0% {
    transform: translateY(0%) scaleY(0.6);
  }
  60% {
    transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
  }
  60% {
    -webkit-transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
  }
}

.disappear {
  display: none;
}

.bazang {
  color: pink;
  font-size: 6em;
}

.out-of-stock {
  display: none;
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 24px;
  line-height: 36px;
}
</style>

Js Code

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
	 $(function() {
   $("#boxingthree").draggable({
     revert: "invalid",
     snap: ".drapCircle",
     snapMode: "inner"
   });
   $("#boxerone").droppable({
     accept: "#boxingthree",
     hoverClass: "ui-state-active",
     drop: function(event, ui) {
       $("#boxingthree")
         .addClass("disappear");
       $("#boxerone")
         .addClass("colorChange")
         .addClass("bounce");
     }
   });
 });

 $(function() {
   $("#boxingone").draggable({
     revert: "invalid"
   });
   $("#boxertwo").droppable({
     accept: "#boxingone",
     hoverClass: "ui-state-active",
     drop: function(event, ui) {
       $("#boxingone")
         .addClass("disappear");
       $("#boxertwo")
         .addClass("colorChangeGreen")
         .addClass("bounce");
     }
   });
 });

 $(function() {
   $("#boxingfour").draggable({
     revert: "invalid"
   });
   $("#boxerthree").droppable({
     accept: "#boxingfour",
     activeClass: "ui-state-hover",
     hoverClass: "ui-state-active",
     drop: function(event, ui) {
       $("#boxingfour")
         .addClass("disappear");
       $("#boxerthree")
         .addClass("colorChangeOrange")
         .addClass("bounce");
     }
   });
 });

 $(function() {
   $("#boxingtwo").draggable({
     revert: "invalid"
   });
   $("#boxerfour").droppable({
     accept: "#boxingtwo",
     activeClass: "ui-state-hover",
     hoverClass: "ui-state-active",
     drop: function(event, ui) {
       $("#boxingtwo")
         .addClass("disappear");
       $("#boxerfour")
         .addClass("colorChangeBlue")
         .addClass("bounce");
     }
   });
 });

 $(function() {
   var draggableList = $(".drabbableList");
   if (draggableList.children().length == 0) {
     $("<h4 class='out-of-stock'>Whoa!<br/>You must really like images!</h4>")
       .appendTo(drabbableList)
       .fadeIn("slow");
   }
 });
</script>

if you want to discuss anything about this code below comment me we will guide you thanks

LEAVE A REPLY