JS, Ajax, PHP Issue

[Kudose]

'ello all.

I am having an issue getting x,y values to update properly.

I will try to explain this best I can.

Here is the code that updates the x,y values in hidden fields. It works properly:

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}

function startUp(e){
var targetobj = document.getElementById(e);
imgId=targetobj.id;
imgId.search(/_(\d+$)/);
num=RegExp.$1;
imagePostion = findPos(targetobj);
document.getElementById("input_"+num).value=imagePostion[0]+"_"+imagePostion[1];
}

function loadUp(){
<?php
foreach($listingImages as $key => $value){
?>
startUp('<?php echo 'image_'.$key; ?>');
<?php
}
?>
}

Here is the code that is called when a Scriptaculous event is initiated:
function req(){
/** this doesnt seem to be updating properly **/
/** it doesnt make much sense ... it works onLoad **/
loadUp();
/** from here on works just fine **/
var allImages = document.images;
var toPass = '';
for(var i = 0; i < allImages.length; i++){
if(toPass == ''){
toPass = document.getElementById('input_' + [i]).value;
} else {
toPass = toPass + ',' + document.getElementById('input_' + [i]).value;
}
}

Here is the Scriptaculous code ... it works fine.

Sortable.create("images",
{
tag:'img',overlap:'horizontal',constraint: false, onUpdate:req
}
)

Any help would be friggin awesome!

TIA.

[Kudose]

Does anyone know of any sorting algorithms that sort like humans?

I think the problem is that if the image is 1px higher than the rest, it gets moved into first place ... which isn't very useful to humans ...

Here is what I am using:

/** sort values by x, then y **/
/** x = $images[1] & y = $images[0] **/
foreach ($allImages as $key => $val) {
$tmp_0[$key] = $val[0];
$tmp_1[$key] = $val[1];
}

array_multisort($tmp_1, SORT_ASC, $tmp_0, SORT_ASC, $allImages);
/** sets value to image name **/
foreach($allImages as $k => $v){
$arranged[] = $v[2];
}

[bpat1434]

what about natsort()? From the manual:
This function implements a sort algorithm that orders alphanumeric strings in the way a human being would while maintaining key/value associations. This is described as a "natural ordering".

[Kudose]

Thanks for the suggestion, but I don't think that will work for this situation. Unless I just don't see how to implement it of course.

I'm not really sure how to go about explaining the problem aside from above.

Here are some screen shots of what I am talking about.

1 - The initial page load.
2 - The image being moved via drag and drop.
3 - The ordering after dropped.

[bpat1434]

Well when you're sorting the arrays, you're sorting in order ascending. So if you move the picture 1px up, it's doing what it's supposed to. Since that picture will be 1px higher than the rest (thus the y value is lower) then that gets moved to the first spot.

The only way I can think to counteract that is to give a specific leeway. Like, give a 5px padding so that if they aren't completely right, they can be close.

Then again, you could always compare the items around it, and change the Y value accordingly so that the moved picture Y value is defaulted to that of the ones around it. So if you're off by 1px, then it defaults to 1px more/less to fit in the group.

Moving up a row is pretty simple, just check to make sure the top of the image is at 50% of the top row (so the top left corner is actually halfway up the pictures in the top row).

[Kudose]

I've been trying to implement something like you mentioned above really hard, but can't seem to get anything out and working.

Would you mind lending a hand to push me off in the right direction?

I am still using the code from above. :(

[bpat1434]

I'd love to help you out, but I just don't have the time to devote to it. It'd take me quite a bit to sit down and come up with something.

Briefly, I guess it would look something like:

- Function to add to the $allImages array which row the images go in based upon the Y value
function getRow($y)
{
// Add as many rows as you'd like. I'm guessing the images are about 100 x 100 pixels
if($y<=55)
return 0;
if($y>=56 && $y <= 155)
return 1;
if($y>=156 && <= 255)
return 2;
}

function sortItems($x, $y, $row)
{
global $allImages;
$arranged = array();

array_multisort($row, SORT_ASC, $x, SORT_ASC, $allImages);

// Add the image information:
for($i=0; $i<count($allImages); $i++)
{
$arranged[] = $allImages[$i][2]; // Double check, may actually be 3 now
}

return $arranged;
}

function addRow($allImages)
{
for($i=0; $i<count($allImages); $i++)
{
$tmp_x[$i] = $allImages[$i][1];
$tmp_y[$i] = $allImages[$i][0];
$tmp_r[$i] = getRow($allImages[$i][0]);
}

if(sortItems($tmp_x, $tmp_y, $tmp_r))
return true;
else
return false;
}
- Sort the AllImages array based upon the row first, then the x value (thus eliminating the Y sorting)
- Loop through the allImages array to then display each picture

THat's my best effort right now. If I find extra time, I'll take another look at it. But without any real code (like your image dimensions, the rest of the PHP and JS code) it will be difficult to help you out.