GSAP Draggable Example

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

Simple example using GSAP 's draggable library with element cloning. A joy to use!

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>GSAP Draggable Example </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
		
	<ul id="drag" class="items">
		<li class="item" data-index="0">
			<div class="item__drag">Item #1</div>
		</li>
		<li class="item" data-index="1">
			<div class="item__drag">Item #2</div>
		</li>
		<li class="item" data-index="2">
			<div class="item__drag">Item #3</div>
		</li>
	</ul>	
	
	<div id="drop" class="dropzone">
		<svg class="dropzone__icon" width="40" height="40" viewBox="0 0 24 24"><path d="M24 11h-2.051c-.469-4.725-4.224-8.48-8.949-8.95v-2.05h-2v2.05c-4.725.47-8.48 4.225-8.949 8.95h-2.051v2h2.051c.469 4.725 4.224 8.48 8.949 8.95v2.05h2v-2.05c4.725-.469 8.48-4.225 8.949-8.95h2.051v-2zm-11 8.931v-3.931h-2v3.931c-3.611-.454-6.478-3.32-6.931-6.931h3.931v-2h-3.931c.453-3.611 3.32-6.477 6.931-6.931v3.931h2v-3.931c3.611.454 6.478 3.319 6.931 6.931h-3.931v2h3.931c-.453 3.611-3.32 6.477-6.931 6.931zm1-7.931c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2z"/></svg>
		<p class="dropzone__txt">Drop Zone</p>
	</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/verdond2/gsap-draggable-example-XVxZpO */
html, body {
  background-color: lightgrey;
  color: white;
  box-sizing: border-box;
}

.container {
  margin-top: 50px;
  padding: 0 5%;
  display: flex;
}

.items {
  padding: 10px;
  margin-right: 20px;
  border: 4px solid black;
  width: 320px;
  height: 400px;
}

.item {
  position: relative;
  margin-bottom: 10px;
  height: 50px;
}
.item__drag {
  position: absolute;
  left: 0;
  right: 0;
  padding-top: 15px;
  height: 50px;
  background-color: #6495ed;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  transition: background-color, border 0.2s ease-in;
}
.item__drag:active {
  background-color: #3b6cc3;
  border: 1px solid black;
}

.dropzone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 4px dotted black;
  background-color: lightgrey;
  transition: background-color 0.2s linear;
}
.dropzone__txt {
  font-weight: 700;
  font-size: 30px;
  color: black;
}
.dropzone--over {
  background-color: #dc143c;
  color: white;
}
.dropzone--over .dropzone__icon {
  fill: white;
}
.dropzone--over .dropzone__txt {
  color: white;
}


/*Downloaded from https://www.codeseek.co/verdond2/gsap-draggable-example-XVxZpO */

var dropZone = document.getElementById('drop');
var drag = document.getElementById('drag');

function dragItem() {
	if (this.hitTest(dropZone, '50%')) {
		drop.classList.add('dropzone--over');
	} else {
		drop.classList.remove('dropzone--over');
	}
}

function removeItem(element) {
	element.kill();
	element.target.remove();
}

function releaseItem() {

	var item = this;

	if (item.hitTest(dropZone, '50%')) {
		drop.classList.remove('dropzone--over');
		removeItem(this);
	} else {
		TweenMax.to(item.target, 0.3, {
			x: 0,
			y: 0,
			ease: Elastic.easeOutIn,
			onComplete: function onComplete() {
				return removeItem(item);
			}
		});
	}
}

function createDragItem(element) {
	Draggable.create(element, {
		type: 'x,y',
		onPress: cloneItem,
		onDrag: dragItem,
		onRelease: releaseItem
	});
}

function cloneItem() {

	var clone = this.target.cloneNode(true);

	var parent = this.target.parentNode;

	TweenLite.set(clone, { clearProps: "all" });

	parent.appendChild(clone);

	createDragItem(clone);
}

createDragItem('.item__drag');

Comments