Draggable

In this example below you will see how to do a Draggable with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by serban, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright serban ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Draggable</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container">
  <div id="box1" class="box">drag</div>
  <div id="box2" class="box">drop</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/serban/draggable-MazJLJ */
body {
  background-color: black;
  color: #ccc;
  font-family: Signika Negative, Asap, sans-serif;
  font-weight: 300;
  padding: 10px;
}

#container {
  position: relative;
}

.box {
  position: absolute;
  width: 200px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  color: white;
  border-radius: 10px;
  border: 2px solid black;
}

#box1 {
  background-color: red;
  top: 0px;
}

#box2 {
  background-color: blue;
  top: 88px;
}

a {
  color: white;
}

.highlight {
  border: 4px solid yellow;
  width: 196px;
  height: 76px;
  line-height: 76px;
}

p {
  margin-top: 8px;
}

/*Downloaded from https://www.codeseek.co/serban/draggable-MazJLJ */

var xpos;
var ypos;
Draggable.create("#box1", {
    type:"x,y",
  onPress: function(e) {
    //alert("x: "+this.x);
    xpos = this.x;
    ypos = this.y;
  },
    onDragEnd:function(e) {
        //see if the target overlaps with the element with ID "element2"
      //alert("x: "+xpos);
      TweenMax.to(this.target, .5,{x: xpos, y: ypos});
        if (this.hitTest("#box2")) {
            //do stuff
         
          TweenMax.to(this.target, 0.2,{backgroundColor:"green"});
        }
          else
            {
             // TweenMax.to(this.target, .5,{x: xpos, y: ypos});
              TweenMax.to(this.target, 0.2,{backgroundColor:"red"});
            }
          //alert("HIT YES"+this.target);
          
        
    }
});






/*

var myDraggable = Draggable.create("#box1", {
 // bounds:"#container"
  bounds: window,
  type:"x,y"
})[0];

myDraggable.addEventListener("press", onPress);

function onPress() {
  console.log("myDraggable was pressed");
  TweenLite.to(this, 0.2, {backgroundColor:"green"}); // animate the backgroundColor of the target of the Draggable that was pressed
}

myDraggable.addEventListener("dragend", onEnd);

function onEnd() {
  if (this.hitTest("#box2")) {
            //do stuff
    alert("WORKS BITCHY")
    TweenLite.to(this, 0.2, {backgroundColor:"yellow"});
  }
 
}
*/

Comments