Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Spiderian

Draggable simple tutorial?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Alright, I have problems with interactivity. In an attempt to rectify that I am trying out draggable. I have been unable to find a starting from scratch tutorial so, I just read a lot of notes on it and got it to kind of work. I think there might be a problem with my layout, but since I just kind of jumped in I am not sure how to set up my markup to work with this.

 

A brief description of my project; I am building interactive maps. They have multiple floors meaning multiple layers. The navigation has to stay put, but I want to be able to zoom in and drag the map around to scroll it. It has to remain in my #canvas and get clipped if it exceeds those bounds.

 

My problems; after I zoom in it drags to show the hidden portions of the map, but then snaps back to center. After I drag the map, it changes the z-index of the draggable #images to 1001, and every drag after increases that number by 1.

 

My markup:

#canvas {
	position: absolute;
	background-color: black;
	width: 1080px;
	height: 1080px;
	overflow: hidden;
}

.mapLayer {
	width: 1080px;
	height: 1080px;
	position: absolute;
	overflow: hidden;
}

#images {
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1080px;
	height: 1080px;
	z-index: 0;
}

#key 	{
	position: absolute;
}

#legend {
	position: absolute;
	top: 170px;
	left: 33px;
}

#buttons {
	position: absolute;
	top: 830px;
	left: 24px;
	width: 300px;
	z-index: 5;
}

.btn {
	position: relative;
	margin-top: -4px;
}

#chooseview {
	position: absolute;
	top: 800px;
	left: 24px;
}

#zoom {
	position: absolute;
	top: 40px;
	left: 40px;
	display: block;
	width: 50px;
	z-index: 5;
}

.zoom {
	width: 50px;
	height: 50px;
}

My code:

window.onload = function() {
	var images = document.getElementById('images')
	var canvas = document.getElementById('canvas')
	var btn01 = document.getElementById('btn01');
	var btn02 = document.getElementById('btn02');
	var btn03 = document.getElementById('btn03');
	var btn04 = document.getElementById('btn04');
	var zin = document.getElementById('zin');
	var zout = document.getElementById('zout');
	var you = document.getElementById('you');
	var fl01 = document.getElementById('fl01');
	var fl02 = document.getElementById('fl02');
	var fl03 = document.getElementById('fl03');
	var fl04 = document.getElementById('fl04');
	var st01 = document.getElementById('st01');
	var st02 = document.getElementById('st02');
	var animateFl01 = new revealFl01();
	var animateFl02 = new revealFl02();
	var animateFl03 = new revealFl03();
	var animateFl04 = new revealFl04();
	var animateZin = new ZoomIn();
	var animateZout = new ZoomOut();

	//: This is to hide layers on start.
		TweenLite.to(you, 0, {opacity:1});
		TweenLite.to(fl01, 0, {opacity:1});
		TweenLite.to(fl02, 0, {opacity:1});
		TweenLite.to(st01, 0, {opacity:1});
		TweenLite.to(fl03, 0, {opacity:0});
		TweenLite.to(fl04, 0, {opacity:0});
		TweenLite.to(st02, 0, {opacity:0});

	//: These are button functions to show and hide layers.
	function revealFl01() {
		this.tweenCount = 0;
		this.animate_Fl01 = function(){
			TweenLite.to(you, 0.25, {opacity:1});
			TweenLite.to(fl01, 0.25, {opacity:1});
			TweenLite.to(fl02, 0.25, {opacity:1});
			TweenLite.to(st01, 0.25, {opacity:1});
			TweenLite.to(fl03, 0.25, {opacity:0});
			TweenLite.to(fl04, 0.25, {opacity:0});
			TweenLite.to(st02, 0.25, {opacity:0});
			this.tweenCount++;
		};
	}

	function animate_Fl01(event){
		animateFl01.animate_Fl01();
	}

	function revealFl02() {
		this.tweenCount = 0;
		this.animate_Fl02 = function(){
			TweenLite.to(you, 0.25, {opacity:0});
			TweenLite.to(fl01, 0.25, {opacity:0});
			TweenLite.to(fl02, 0.25, {opacity:1});
			TweenLite.to(st01, 0.25, {opacity:1});
			TweenLite.to(fl03, 0.25, {opacity:0});
			TweenLite.to(fl04, 0.25, {opacity:0});
			TweenLite.to(st02, 0.25, {opacity:0});
			this.tweenCount++;
		};
	}

	function animate_Fl02(event){
		animateFl02.animate_Fl02();
	}

	function revealFl03() {
		this.tweenCount = 0;
		this.animate_Fl03 = function(){
			TweenLite.to(you, 0.25, {opacity:0});
			TweenLite.to(fl01, 0.25, {opacity:0});
			TweenLite.to(fl02, 0.25, {opacity:0});
			TweenLite.to(st01, 0.25, {opacity:0});
			TweenLite.to(fl03, 0.25, {opacity:1});
			TweenLite.to(fl04, 0.25, {opacity:1});
			TweenLite.to(st02, 0.25, {opacity:1});
			this.tweenCount++;
		};
	}

	function animate_Fl03(event){
		animateFl03.animate_Fl03();
	}

	function revealFl04() {
		this.tweenCount = 0;
		this.animate_Fl04 = function(){
			TweenLite.to(you, 0.25, {opacity:0});
			TweenLite.to(fl01, 0.25, {opacity:0});
			TweenLite.to(fl02, 0.25, {opacity:0});
			TweenLite.to(st01, 0.25, {opacity:0});
			TweenLite.to(fl03, 0.25, {opacity:0});
			TweenLite.to(fl04, 0.25, {opacity:1});
			TweenLite.to(st02, 0.25, {opacity:1});
			this.tweenCount++;
		};
	}

	function animate_Fl04(event){
		animateFl04.animate_Fl04();
	}

	function ZoomIn() {
		this.tweenCount = 0;
		this.animate_Zin = function(){
			TweenLite.to(you, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(fl01, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(fl02, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(st01, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(fl03, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(fl04, 0.25, {height:2000, width:2000, left:-540, top:-540});
			TweenLite.to(st02, 0.25, {height:2000, width:2000, left:-540, top:-540});
			this.tweenCount++;
		};
	}

	function animate_Zin(event){
		animateZin.animate_Zin();
	}

	function ZoomOut() {
		this.tweenCount = 0;
		this.animate_Zout = function(){
			TweenLite.to(you, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(fl01, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(fl02, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(st01, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(fl03, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(fl04, 0.25, {height:1080, width:1080, left:0, top:0});
			TweenLite.to(st02, 0.25, {height:1080, width:1080, left:0, top:0});
			this.tweenCount++;
		};
	}

	function animate_Zout(event){
		animateZout.animate_Zout();
	}
	
	btn01.onclick = animate_Fl01;
	btn02.onclick = animate_Fl02;
	btn03.onclick = animate_Fl03;
	btn04.onclick = animate_Fl04;
	zin.onclick = animate_Zin;
	zout.onclick = animate_Zout;

	Draggable.create(images, {type:"scroll", edgeResistance:0.85, bounds:(canvas)});
};

Unfortunately my images are proprietary so I can't put up a working version yet. If anyone has seen a tutorial about this, has ideas on how to scroll the clipped off part, or if anyone knows where I screwed this up please let me know.
 

Link to comment
Share on other sites

In order to prevent the z-index from increasing, just set zIndexBosst to false:

 

zIndexBoost : Boolean - by default, for vertical/horizontal dragging, when an element is pressed/touched, it has its zIndex set to a high value (1000 by default) and that number gets incremented and applied to each new element that gets pressed/touched so that the stacking order looks correct (newly pressed objects rise to the top), but if you prefer to skip this behavior set zIndexBoost:false.

 

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

 

---

 

 

Unfortunately its difficult to troubleshoot what is happening by just seeing lots of js and css code. It really helps if you can create a reduced test case that we can experiment with. We don't need to see proprietary images or any of your production files.

 

Best thing to do is use codepen.io so that multiple people can fork and edit a simple sample and provide working results. You can start by forking this demo: http://codepen.io/GreenSock/pen/KJbIy and adding your code.

  • Like 2
Link to comment
Share on other sites

Thanks. I decided to go with jquery overscroll; I got it to work really easily.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×