Brian Miller Posted August 12, 2011 Share Posted August 12, 2011 I'm looking for a jQuery version of this script, that doesn't use jQueryUI: http://davidwalsh.name/element-position-swap-mootools It animates and swaps 2 elements. Thanks Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/ Share on other sites More sharing options...
0 joddie191 Posted August 12, 2011 Share Posted August 12, 2011 Something along the lines of (function( $ ){ $.fn.swap = function(other,speed) { //get the position var position1 = this.offset(); var position2 = other.offset(); //position this where it is this.css({ top: position1.top + 'px', left: position1.left + 'px', position: 'absolute' }); //position the other element where it is other.css({ top: position2.top + 'px', left: position2.left + 'px', position: 'absolute' }); this.animate({ 'top': position2.top + 'px', 'left': position2.left + 'px' }, speed, function() { // Animation complete. }); other.animate({ 'top': position1.top + 'px', 'left': position1.left + 'px' }, speed, function() { // Animation complete. }); }; })( jQuery ); //add animate when we clicky trigger $('#trigger').click(function(e) { $('#element1').swap($('#element2'),300); }); Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594229394 Share on other sites More sharing options...
0 Guest Posted August 12, 2011 Share Posted August 12, 2011 $(document).ready(function() { $('#startAnimation').click(function() { $('#item1').animate({ top: $('.item:eq(1)').css('top'), left: $('.item:eq(1)').css('left') }, 500); $('#item2').animate({ top: $('.item:eq(0)').css('top'), left: $('.item:eq(0)').css('left') }, 500); }); }); Was bored in work and remember seeing this topic before I left this morning... said i'd give it a go. Beaten to the punch it seems :p Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594229438 Share on other sites More sharing options...
0 joddie191 Posted August 12, 2011 Share Posted August 12, 2011 On 12/08/2011 at 10:10, Quigley Guy said: $(document).ready(function() { $('#startAnimation').click(function() { $('#item1').animate({ top: $('.item:eq(1)').css('top'), left: $('.item:eq(1)').css('left') }, 500); $('#item2').animate({ top: $('.item:eq(0)').css('top'), left: $('.item:eq(0)').css('left') }, 500); }); }); Was bored in work and remember seeing this topic before I left this morning... said i'd give it a go. Beaten to the punch it seems :p I also saw this at work and though it would be a good excuse to finally check out jQuery. Made me wanna marry jQuery though, and divorce Dojo Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594229444 Share on other sites More sharing options...
0 Guest Posted August 12, 2011 Share Posted August 12, 2011 Just put up the full code on JS Fiddle :) Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594229446 Share on other sites More sharing options...
0 Brian Miller Posted August 12, 2011 Author Share Posted August 12, 2011 Thanks Quigley Guy, What if the "Items" were staked on top of one another with relative positions, and they were of varying heights, would that still work? Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594229916 Share on other sites More sharing options...
0 Brian Miller Posted August 12, 2011 Author Share Posted August 12, 2011 Here's my latest attempt at hacking your codes: http://jsfiddle.net/kESHy/17/ Not really making much progress... Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594230172 Share on other sites More sharing options...
0 Guest Posted August 12, 2011 Share Posted August 12, 2011 On 12/08/2011 at 16:07, Brian Miller said: Thanks Quigley Guy, What if the "Items" were staked on top of one another with relative positions, and they were of varying heights, would that still work? You had to go and be awkward now didn't ya :D Here you go anyway... Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594230544 Share on other sites More sharing options...
0 Brian Miller Posted August 12, 2011 Author Share Posted August 12, 2011 Thanks, What if .item was positioned as relative? This screenshot shows kind of what I'm aiming for: Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594230588 Share on other sites More sharing options...
0 Brian Miller Posted August 12, 2011 Author Share Posted August 12, 2011 So hears my code so far: http://jsfiddle.net/LYc3E/3/ I've not been able to include all your cool visual animations because I've been having problems with the absolute positioning. Can someone try to put that in for me? Remember, Paragraph 1 and Paragraph 2 shoudl not jump or jitter, if you don't know the height or the top location of the DIVs. Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594230888 Share on other sites More sharing options...
0 Brian Miller Posted August 12, 2011 Author Share Posted August 12, 2011 Updated: http://jsfiddle.net/LYc3E/8/ Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594230966 Share on other sites More sharing options...
0 Brian Miller Posted August 13, 2011 Author Share Posted August 13, 2011 I've not been making any good progress with combining Quigley Guy's code with mine :-( Help me! Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594231592 Share on other sites More sharing options...
0 Guest Posted August 14, 2011 Share Posted August 14, 2011 $(document).ready(function() { var animationSteps = 0; var animationInProgress = false; $('#item-queue').css('height', $('#item-queue').height()); $('#item-queue .item').each(function() { var top = 0; $(this).prevAll().each(function() { top += $(this).outerHeight(); }); $(this).css('top', top + 'px'); $(this).css('position', 'absolute'); }); $('#item-queue .item .arrow').click(function() { if(animationInProgress == false) { var item = $(this).parent(); var direction = ($(this).hasClass('up') ? 'up' : 'down'); if(direction == 'up' && $(item).attr('data-order') > 1) { var swap = $('.item[data-order="' + (parseInt($(item).attr('data-order'), 10) - 1) + '"]'); moveItem(item, swap, direction); } else if(direction == 'down' && $(item).attr('data-order') != $('#item-queue').children().length) { var swap = $('.item[data-order="' + (parseInt($(item).attr('data-order'), 10) + 1) + '"]'); moveItem(item, swap, direction); } } }); function moveItem(item, swap, direction) { animationInProgress = true; var itemTop = 0; var swapTop = 0; if(direction == 'up') { itemTop = parseInt($(item).css('top'), 10) - $(swap).outerHeight(); swapTop = parseInt($(swap).css('top'), 10) + $(item).outerHeight(); } else if(direction == 'down') { itemTop = parseInt($(item).css('top'), 10) + $(swap).outerHeight(); swapTop = parseInt($(swap).css('top'), 10) - $(item).outerHeight(); } $(item).animate({ top: itemTop + 'px' }, 500, function() { animationSteps++; if(animationSteps == 2) resetAnimationValues(); }); $(swap).animate({ top: swapTop + 'px' }, 500, function() { animationSteps++; if(animationSteps == 2) resetAnimationValues(); }); var swapValue = $(item).attr('data-order'); $(item).attr('data-order', $(swap).attr('data-order')); $(swap).attr('data-order', swapValue); } function resetAnimationValues() { animationSteps = 0; animationInProgress = false; } }); now... All items are displayed normally on the page. Once the page has loaded each of the items in the queue are positioned absolutely (in relation to the relative queue element). I am now using a custom attribute to record the order of the elements are on-screen as DOM order does not matter in absolutely positioned items. Have a look at the latest code in action... Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594233414 Share on other sites More sharing options...
0 Brian Miller Posted August 14, 2011 Author Share Posted August 14, 2011 OMG! You're the dude, you're the Quigley dude! :D Thank you Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594233776 Share on other sites More sharing options...
0 Brian Miller Posted August 14, 2011 Author Share Posted August 14, 2011 What does this line do? $('#item-queue').css('height', $('#item-queue').height()); Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594234104 Share on other sites More sharing options...
0 Mathachew Veteran Posted August 14, 2011 Veteran Share Posted August 14, 2011 On 14/08/2011 at 20:55, Brian Miller said: What does this line do? $('#item-queue').css('height', $('#item-queue').height()); Sets the height of the item-queue element so that the content below it does not shift. Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594234118 Share on other sites More sharing options...
0 Guest Posted August 14, 2011 Share Posted August 14, 2011 On 14/08/2011 at 21:06, Mathachew said: Sets the height of the item-queue element so that the content below it does not shift. Exactly, the height is initially set to 'auto' so once all the containing children are set to absolute (removed from the normal flow of the document) the actual height of the container will be reduced to 0. Try it out yourself by removing that one line of javascript and putting extra content underneath the item-queue div. Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594234142 Share on other sites More sharing options...
0 Brian Miller Posted August 14, 2011 Author Share Posted August 14, 2011 Good stuff. I was confused, thinking it was the equivalent to x=x, which seemed unneeded but your explanation makes sense. Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594234160 Share on other sites More sharing options...
0 Mathachew Veteran Posted August 14, 2011 Veteran Share Posted August 14, 2011 On 14/08/2011 at 21:33, Brian Miller said: Good stuff. I was confused, thinking it was the equivalent to x=x, which seemed unneeded but your explanation makes sense. The first part sets the height, while the second gets the height. Breaking it down looks like this: var height = $('#item-queue').height(); $('#item-queue').css('height', height); // alternate set method $('#item-queue').height(height); The result is the same in either case. There are several jQuery functions that operate as a getter/setter: height, width, html, text, and val immediately come to mind. Link to comment https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/#findComment-594234268 Share on other sites More sharing options...
Question
Brian Miller
I'm looking for a jQuery version of this script, that doesn't use jQueryUI: http://davidwalsh.name/element-position-swap-mootools
It animates and swaps 2 elements.
Thanks
Link to comment
https://www.neowin.net/forum/topic/1018220-jquery-swap-element-positions/Share on other sites
18 answers to this question
Recommended Posts