html - Sort array of images with mootools and javascript -
i'm trying sort array of images dragging , dropping them. if dragged image (cur) comes before image drop on (next), want want images next move one. else, want images next cur-1 move forward one.
as far can tell logic correct, dragging backwards (next < cur) doesn't work properly. places image on top of one, or @ end of array, or extends array one.
my brain has gone numb, please...
the html/javascript,
<!doctype html> <html> <head> <title>ui test</title> <script type="text/javascript" src="mootools-core-1.5.1.js"></script> <script type="text/javascript" src="mootools-more-1.5.1.js"></script> <link rel="stylesheet" type="text/css" href="res/ui.css"/> </head> <body> <p id="debug_area">debug area</p> <script type="text/javascript"> //areas , placeholders //divs var searcharea = new element('div', { id: 'search_area' }); var resultsarea = new element('div', { id: 'results_area' }); var resultsoverflow = new element('div', { id: 'results_overflow' }); var pinnedarea = new element('div', { id: 'pinned_area' }); var pinnedoverflow = new element('div', { id: 'pinned_overflow' }); var timeweatherarea = new element('div', { id: 'timeweather_area' }); var apparea = new element('div', { id: 'app_area' }); var videoarea = new element('div', { id: 'video_area' }); //thumbnail stuff var numresults = 0; var arrresults = []; var numpinned = 0; var arrpinned = []; var playlist = []; var drops = []; drops.push(resultsarea); drops.push(pinnedarea); var reorderimages = function(array){ for(i=0;i<array.length;i++){ array[i].setstyle('top', 100*((i-(i%2))/2)); array[i].setstyle('left', 100*(i%2)); } }; var images = []; for(i=0;i<10;i++){ var image = new element('img', { id: 'image_'+i, class: 'draggable', src: 'res/vid/thumbs/'+(i+1)+'-thumb.jpeg', alt: 'image', height: '100', width: '100', position: 'absolute', styles:{ visibility: 'visible' } }); images.push(image); arrresults.push(image); var mousex=0,mousey=0; image.makedraggable({ droppables: drops, container: searcharea, onstart: function(draggable){ ////$('debug_area').set('html', 'start: '+draggable.id); }, onenter: function(draggable, droppable){ ////$('debug_area').set('html', 'entered '+droppable.id); }, onleave: function(draggable, droppable){ ////$('debug_area').set('html', 'left '+droppable.id); if(droppable.id == 'results_area'){ draggable.inject(searcharea); draggable.setstyle('top', searcharea.get('top')); draggable.setstyle('left', searcharea.get('left')); } }, ondrop: function(draggable, droppable){ ////$('debug_area').set('html', 'dropped in '+droppable.id); var string; var val; if(droppable){ string = draggable.id; val = string.replace('image_', '').toint(); } if(droppable.id == 'pinned_area'){ if(arrresults.indexof(draggable) != -1) arrresults.erase(draggable); if(arrpinned.indexof(draggable) == -1){ arrpinned.push(draggable); val = arrpinned.indexof(draggable); } draggable.inject(pinnedoverflow); draggable.setstyle('float', 'right'); reorderimages(arrresults); reorderimages(arrpinned); ////$('debug_area').set('html', arrpinned.length +' / '+arrresults.length +' = '+ arrpinned.indexof(draggable)); }else if(droppable.id == 'results_area'){ if(arrpinned.indexof(draggable) != -1) arrpinned.erase(draggable); if(arrresults.indexof(draggable) == -1){ arrresults.push(draggable); val = arrresults.indexof(draggable); draggable.inject(resultsoverflow); }else{ //code sorting var cur, next; var x=draggable.getposition().x, y=draggable.getposition().y; for(i=0;i<arrresults.length;i++){ var nextx = arrresults[i].getposition().x, nexty = arrresults[i].getposition().y; if((x-x%100)/100 == (nextx-nextx%100)/100){ if((y-y%100)/100 == (nexty-nexty%100)/100){ cur = arrresults.indexof(draggable); next = i; $('debug_area').set('html',arrresults[i].get('id')+' '+cur+' '+next+' '+arrresults.length); if(cur < next){ for(j=cur+1;j<=next;j++){ var temp = arrresults[j]; arrresults[j-1] = temp; } arrresults[next] = draggable; break; }else if(cur > next){ for(j=next;j<cur;j++){ var temp = arrresults[j]; arrresults[j+1] = temp; } arrresults[next] = draggable; break; } } } } } //draggable.setstyle('float', 'right'); reorderimages(arrresults); reorderimages(arrpinned); ////$('debug_area').set('html', arrpinned.length +' / '+arrresults.length +' = '+ arrresults.indexof(draggable)); } } }); image.setstyle('position', 'absolute'); image.setstyle('top', 100*((i-(i%2))/2)); image.setstyle('left', 100*(i%2)); } resultsoverflow.adopt(images); var refreshthumbs = function(){ var source; for(i=0;i<arrresults.length;i++){ source = arrresults[i].get('src'); source = source.split('?'); arrresults[i].set('src', source[0]+'?'+ new date().gettime()); } for(i=0;i<arrpinned.length;i++){ source = arrpinned[i].get('src'); source = source.split('?'); arrpinned[i].set('src', source[0]+'?'+ new date().gettime()); } }; refreshthumbs.periodical(10000); //master area injection resultsoverflow.inject(resultsarea); resultsarea.inject(searcharea); pinnedoverflow.inject(pinnedarea); pinnedarea.inject(searcharea); searcharea.inject(apparea); videoarea.inject(apparea); apparea.inject(document.body); window.addevent('domready', function(){ }); window.addevent('load', function(){ }); </script> </body> </html> the css fine (i think) here anyway, http://pastebin.com/xq8zrrmw
here's jsfiddle, https://jsfiddle.net/l4tgh25a/
update 1: changing,
else if(cur > next){ for(j=next;j<cur;j++){ var temp = arrresults[j]; arrresults[j+1] = temp; } arrresults[next] = draggable; break; } to,
else if(cur > next){ arrresults.splice(cur, 1); arrresults.splice(next, 0, draggable); break; } fixes problem. why? i'm quite sure algorithm correct (but not accounting beginning , end of array, doesn't matter because problem happens in middle anyway). algorithm wrong or javascript thing?
Comments
Post a Comment