JSFiddle - React, Tailwind, and code Playground
HTML
Objs:</br>
<div id="Objs"></div>
</br>
Xs:</br>
<div id="Xs"></div>
</br>
Ys:</br>
<div id="Ys"></div>
JavaScript
var Objs, Xs, Ys;
function initialize() {
//Initialize the Objs array
Objs = new Array(
{name:"One", x:0, y:12},
{name:"Two", x:1, y:14},
{name:"Three", x:2, y:17},
{name:"Four", x:3, y:15},
{name:"Five", x:4, y:13},
{name:"Six", x:5, y:15}
);
Xs = new Array();
Ys = new Array();
//Build and sort the indexes
Objs.forEach(function(value, index) {
Xs[index] = {x:value.x, index:index};
Ys[index] = {y:value.y, index:index};
});
Xs.sort(function(a,b) { return a.x-b.x; });
Ys.sort(function(a,b) { return a.y-b.y; });
//Link the object array to the indexes
Xs.forEach(function(value, index) { Objs[value.index].xIx = index; });
Ys.forEach(function(value, index) { Objs[value.index].yIx = index; });
}
Array.prototype.swap = function(a,b) {
var temp = this[a];
this[a] = this[b];
this[b] = temp;
return this;
}
function moveSome(obj, xmove, ymove) {
//Figure out the indices in all arrays
xIx = Objs[obj].xIx;
yIx = Objs[obj].yIx;
//Update the movement
Objs[obj].x += xmove;
Xs[xIx].x += xmove;
Objs[obj].y += ymove;
Ys[yIx].y += ymove;
//Update the location in the index arrays
if(xmove > 0) {
while(xIx < Xs.length-1 && Xs[xIx].x > Xs[xIx+1].x) {
Objs[Xs[xIx+1].index].xIx = xIx;
Xs.swap(xIx, xIx+1);
++xIx;
}
}
else if(xmove < 0) {
while(xIx > 0 && Xs[xIx].x < Xs[xIx-1].x) {
Objs[Xs[xIx-1].index].xIx = xIx;
Xs.swap(xIx, xIx-1);
--xIx;
}
}
if(ymove > 0) {
while(yIx < Ys.length-1 && Ys[yIx].y > Ys[yIx+1].y) {
Objs[Ys[yIx+1].index].yIx = yIx;
Ys.swap(yIx, yIx+1);
++yIx;
}
}
else if(ymove < 0) {
while(yIx > 0 && Ys[yIx].y < Ys[yIx-1].y) {
Objs[Ys[yIx-1].index].yIx = yIx;
Ys.swap(yIx,...