javascript - Move a list item from left to right or right to left updating data-attribute -
this in reference of question "reorder list elements - jquery?" asked here
now want move little further. wanting do, wanting build comparison product items ecommerce.
so, here find reordering list item. want add 2 button in each list item named "left" , "right", though here have shown 1 i.e "right". on clicking the "right" button "data-sortby" value update +1 , list move right i.e. in next position , next positioned list item reorder it's previous position. in short side side movement of li items.
so html below:[just added buttons]
<ul id="ulname"> <li data-sortby="1">three <a href="javascript:;" class="rgth" >right</a></li> <li data-sortby="2">one<a href="javascript:;" class="rgth" >right</a> </li> <li data-sortby="3">two<a href="javascript:;" class="rgth" >right</a> </li> <li data-sortby="4">four<a href="javascript:;" class="rgth" >right</a> </li> and script is:
$(document).ready(function() { var ul = $('ul#ulname'), li = ul.children('li'); li.detach().sort(function(a,b) { return $(a).data('sortby') - $(b).data('sortby'); }); ul.append(li); $('.rgth').each(function(){ var thisli = $(this); var parent = thisli.parent('li'); var right = parent.data('sortby') + 1; var left = parent.data('sortby') - 1; thisli.click(function(){ //alert(parent.data('sortby')+1); alert(right); alert(left); parent.data('sortby', right); parent.next().data('sortby',left); }); }); }); but find "data-" attribute not updating. can please me going wrong?
i have edited code. giving alert of data attribute values see not changing. know doing silly mess. can please help? here fiddle
i changed code , achieved result searching for. final code:
$('.down').click(function(){ var cur = $(this).parent(), next= $(this).parent().next(); if(next.length > 0 ) { var movedown = (cur.offset().left + cur.outerwidth()) - (next.offset().left + next.outerwidth()), moveup = (next.offset().left + next.outerwidth()) - (cur.offset().left + cur.outerwidth()); cur.css('position', 'relative'); cur.animate({'left':-movedown}); next.css('position', 'relative'); next.animate({'left':-moveup},function(){ cur.detach().insertafter(next); next.detach().insertbefore(cur); cur.css({'position': 'static', 'top': 0}); next.css({'position': 'static', 'top': 0}); }); } //cur.detach().insertafter(next); //next.detach().insertbefore(cur); }); $('.up').click(function(){ var cur = $(this).parent(), prev= $(this).parent().prev(); if(prev.length > 0) { var moveup = (cur.offset().left + cur.outerwidth()) - (prev.offset().left + prev.outerwidth()), movedown = (prev.offset().left + prev.outerwidth()) - (cur.offset().left + cur.outerwidth()); cur.css('position', 'relative'); cur.animate({'left':movedown}); prev.css('position', 'relative'); prev.animate({'left':moveup},function(){ cur.detach().insertbefore(prev); prev.detach().insertafter(cur); cur.css({'position': 'relative', 'left': 0}); prev.css({'position': 'relative', 'left': 0}); }); } });