Jump to content
GreenSock

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

$.TweenSortable() - Sortable with Tweening and push effect!

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

Hey all,

 

$.TweenSortable()

 

Easy to use:

<div id="sort-list">
    <div class="slide"><span>Slide 1</span></div>
    <div class="slide"><span>Slide 2</span></div>
    <div class="slide"><span>Slide 3</span></div>
    <div class="slide"><span>Slide 4</span></div>
</div>

<!-- JavaScript -->
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TweenSortable.min.js"></script>
    
<script>
    $("#sort-list").TweenSortable();
</script>
<!-- // JavaScript -->

Demo url: http://front-end.codes/gsap/sortable/

 

File: TweenSortable.min.js (last update: 18th Oct 2014)

-          File size:  2 Kb

-          http://front-end.codes/gsap/sortable/js/TweenSortable.min.js  

 

 

What in TweenSortable? Unminified version:

(function($){

	/* Project GreenSock sortable with TweenMax (or Lite with Ease plugin) only */

	$.fn.TweenSortable = function() {

		/* Script was done quickly (and a bit dirty on the margin-bottom for testing ^^) , still in development atm

			How it works right now, in steps:

			1. At mouseclick on a binded element, the element will be cloned.
			2. The cloned element will be on top of the original element.
			3a. Mousemove binded on the cloned element and the cloned element will follow the cursor.
			3b. Opacity of the original element will be 0.
			3b. While moving the cursor (on the cloned element), it will check where the next or previous element is of the original element.
			3c. When passing by the next or previous element, the original element will move to target in the DOM.    
			4a. Mouseup binded also on the cloned element.
			4b. At mouseup the cloned element will 'ease' to the original element position.
			4c. Original element opacity to 1, then clone element disapears.

		*/

		function dragSlide(e) {
			var slidePosition 		= $(this).offset().top,
			cloneId 			= Math.floor(Math.random() * 1E20),
			slideHTML 			= $(this).html(),
			mousedownPosition 		= e.pageY,
			slideElement 			= this,
			halfElementHeight 		= parseInt($(this).css('height')) / 2,
			elementHeight 			= parseInt($(this).css('height')),
			switchFlag 			= true,
			newPosition 			= 0,
			releasing 			= false;

			$(this).addClass('onDrag');

			$(this).parent().find('.slide').each(function(){
				if ($(this).hasClass('onDrag')) {
					$(this).css({"opacity":"0"}); 
				} else {
					TweenMax.to($(this), 1, {opacity: 0.7});
				}
				
			})
			$('<div class="slide clone" id="clone-'+cloneId+'" style="position: absolute; top:'+slidePosition+'px">'+slideHTML+'</div>').appendTo($(this).parent());

			$("#clone-"+cloneId).mousemove(function(e){
				
				if (!releasing) {
					var dragDistance = parseInt(mousedownPosition-e.pageY);
					var mousePosition = e.pageY;
					
					if (dragDistance < 0) {
						dragDistance_ = String(dragDistance).split("-");
						$(this).css({"top":(slidePosition + parseInt(dragDistance_[1])) +"px"});
					} else {
						$(this).css({"top":(slidePosition - parseInt(dragDistance)) +"px"});
					}
					if (!$(slideElement).parent().find('.slide:eq(0)').hasClass('onDrag')) {

						// check previous slide/item
						var prevElement = $(slideElement).prev().offset().top;

						if ($(this).offset().top < (prevElement + halfElementHeight)) {
							
							if (switchFlag) {
								switchFlag = false;
								TweenMax.to($(slideElement), 0.3, {height: 0, marginBottom: 0, ease:Cubic.easeOut});
								TweenMax.to($(slideElement).prev(), 0.3, {marginBottom: (elementHeight + 20), ease:Cubic.easeOut });
								newPosition = prevElement;
								
								setTimeout(function(){
									TweenMax.to($(slideElement).prev(), 0.3, {marginBottom: 10, ease:Cubic.easeOut});
									$(slideElement).insertBefore($(slideElement).prev());
									$(slideElement).css({"marginBottom":"10px"})
									TweenMax.to($(slideElement), 0.3, {height: elementHeight, marginBottom: 10, ease:Cubic.easeOut});
									
									setTimeout(function(){
										switchFlag = true;
									}, 310)
								}, 310)

							}
						}
					}					
					// check next slide/item
					var nextElement = $(slideElement).next().offset().top;

					if ($(this).offset().top > (nextElement - halfElementHeight)) {
						
						if (switchFlag) {
							switchFlag = false;
							TweenMax.to($(slideElement), 0.3, {height: 0, marginBottom: 0, ease:Cubic.easeOut});
							TweenMax.to($(slideElement).next(), 0.3, {marginBottom: (elementHeight + 20), ease:Cubic.easeOut });
							newPosition = nextElement;
							
							setTimeout(function(){
								TweenMax.to($(slideElement).next(), 0.3, {marginBottom: 10, ease:Cubic.easeOut});
								$(slideElement).insertBefore($(slideElement).next().next());
								$(slideElement).css({"marginBottom":"10px"})
								TweenMax.to($(slideElement), 0.3, {height: elementHeight, marginBottom: 10, ease:Cubic.easeOut});
								
								setTimeout(function(){
									switchFlag = true;
								}, 310)
							}, 310)

						}
					}

				}
				

			})
			$("#clone-"+cloneId).mouseup(function(){
				releasing = true;
				if (newPosition == 0) {
					newPosition = slidePosition;
				}
				TweenMax.to($(this), 0.3, {top: newPosition, ease:Cubic.easeOut});
				setTimeout(function(){
					$(".slide").each(function(){
					TweenMax.to($(this), 0.3, {opacity: 1});
					})
				}, 300);
				setTimeout(function(){
					$(".onDrag").each(function(){
						$(this).removeClass('onDrag');
					})
					$("#clone-"+cloneId).remove();
				}, 600); 
			})
		}
		$(this).find('.slide').each(function(){
			$(this).mousedown(dragSlide);
		})
	}
})(jQuery)
Link to comment
Share on other sites

Very cool - thanks for sharing. I noticed some odd behavior, though - things would just stop/stick at certain points, and my dragging wouldn't work for a while. I think there might be some logic problems in the code, and/or maybe some conflicts...not sure because you only provided minified code (plus I don't have much time to dig into it), but I sure do appreciate the fact that you built this and shared it here. Are you seeing any of that strange behavior? Anyone else? 

Link to comment
Share on other sites

I am seeing the same behavior too Jack. When you try to drag an element, the element sticks and doesnt drag up or down. And then when you release it still tries to drag the one you just released.

Link to comment
Share on other sites

Correct, only slow drag was working, I solved this issue.

It should work properly now.

 

If there is noticed any other thing, please let me know. 

 

Thanks all.

Link to comment
Share on other sites

Hm, it still has a lot of odd behavior. The bottom 1 or 2 seem to jump down briefly sometimes when they shouldn't even move, sometimes when I drag something up in the list, things don't re-order (I have to jiggle it a few times to get things to react), when I let go outside the bounds, things were a bit jerky. Again, not sure exactly why since everything is minified :(

Link to comment
Share on other sites

Hmm.. I'll take another look today. I can't really notice the problem that you describe, so I will make sure the JS code is unminified in next update (today).

I'll let you know when it's done.

Link to comment
Share on other sites

Hi BPolak  :)

 

pls check this discuss :

 

http://greensock.com/forums/topic/10704-sortable-elements-with-draggable/

 

We made two lightweight Sortable with draggable plugin , both works fine and shift the DOMs correctly , maybe one of them be good for your alternative solution ;

pls check these out :

 

jamiejefferson Codepen :

See the Pen iFDow by jamiejefferson (@jamiejefferson) on CodePen

 

and what i made with OSUblake help :

See the Pen eIDna by MAW (@MAW) on CodePen

 

but if you want to only use the TweenMax/Lite pls make unminified version available.

 

hope these helps :)

Link to comment
Share on other sites

Hello BPolak,

 

What was the browsers you were testing this on? ..  I tested it in Firefox 33 and on Windows 7 ..

Link to comment
Share on other sites

Hi BPolak  :)

 

pls check this discuss :

 

http://greensock.com/forums/topic/10704-sortable-elements-with-draggable/

 

We made two lightweight Sortable with draggable plugin , both works fine and shift the DOMs correctly , maybe one of them be good for your alternative solution ;

pls check these out :

 

jamiejefferson Codepen :

See the Pen iFDow by jamiejefferson (@jamiejefferson) on CodePen

 

and what i made with OSUblake help :

See the Pen eIDna by MAW (@MAW) on CodePen

 

but if you want to only use the TweenMax/Lite pls make unminified version available.

 

hope these helps :)

 

Hi Diaco

 

Thanks, great discuss. I will dig into it.

 

And yes, I want it TweenMax only. 

Additionally, I posted the unminified code. :)

 

Hello BPolak,

 

What was the browsers you were testing this on? ..  I tested it in Firefox 33 and on Windows 7 ..

 

Hi Jonathan

 

Tested in all browser, like FF (32) . Testing in chrome most of the time. Win7 yes. 

I reconize some issues, still not flawless yet. I'm going to work on it soon again.

Link to comment
Share on other sites

  • 5 years later...
On 10/21/2014 at 2:27 PM, Diaco said:

Hi BPolak  :)

 

pls check this discuss :

 

http://greensock.com/forums/topic/10704-sortable-elements-with-draggable/

 

We made two lightweight Sortable with draggable plugin , both works fine and shift the DOMs correctly , maybe one of them be good for your alternative solution ;

pls check these out :

 

jamiejefferson Codepen :

 

 

 

and what i made with OSUblake help :

 

 

 

but if you want to only use the TweenMax/Lite pls make unminified version available.

 

hope these helps :)

How can i make one element drag event change position of some other element in this example..

please help.

im using this code to create a sortable list but i want when i drag one this element in the list, some other element in the dom to be affected.

im able to do this using class reference in the draggble instance but with example i cannt continue

 

Link to comment
Share on other sites

3 hours ago, lenux said:

How can i make one element drag event change position of some other element in this example..

That should be easy using the trigger property. See the Draggable docs for more info. We recommend upgrading to GSAP 3 while you're at it :) 

 

If you need help with a specific aspect, please create a new thread about your issue and include a minimal recreation of the issue.

  • Like 1
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.
×