Dynamic create DragPanel extender on client side

[Bassem]

relative and absolute position odd behavior

I was trying to solve this problem to avoid posting more question.

My problem with the elements (img) created using document.create Element and append them to an element (div) then attach them to a dragHandler when I set the position as relative they take an odd behavior - a restriction in the arrangement; the first element can be dragged and dropped anywhere, but the second has to be on the left-top of the first the same for third element has to be on the left-top of the second and so on.

The second problem with absolute-position, in the first click to the created element - to be dragged - the element change its position to the top of the page. Then its OK working fine; no change in position.

Has anyone any idea why this happens?!!
Thanks

[acoder]

Post your code, so I can see what might be causing the problem.

[Bassem]

First thanks a lot you made me look again to my code so I solved the problem of absolute-position. It looks like that appendChild method put the element at the most top-left corner of the parent element, so I only set the top and left after appending.
But for the relative-position here is the code,

function createTerminal(src)
{
    var myid = 'my' + id++ + 'Terminal';
    var img = document.createElement("img");
    img.id = myid;
    img.src = src;
    img.style.position = "relative";
    img.style.width = '60px';
    img.style.height = '55px';
    var con = document.getElementById('PanelBoard');
    con.appendChild(img);
    myDragable = DragHandler.attach(img);
    myDragable.dragEnd = end;
}

[acoder]

You've not defined dragBegin and drag.

[Bassem]

Yes I didn't but that is not what causes the problem.

[acoder]

There must be something else affecting the code. The simple demo uses position:relati ve and everything works fine. Post the rest of your code or a link.

[Bassem]

I use this function to create an image and append it to a div

function createTerminal(src)
{
    var myid = 'my' + id++ + 'Terminal';
    var img = document.createElement("img");
    img.id = myid;
    img.src = src;
    img.style.position = "relative";
    img.style.width = '60px';
    img.style.height = '50px';
    
    var con = document.getElementById('Board');
    con.appendChild(img);
    
    myDragable = DragHandler.attach(img);
    myDragable.dragBegin = begin;
    //myDragable.drag = drag;
    myDragable.dragEnd = end;
}

and this function reset the image position if it is outside the div, to the last valid one

function end(oElem, x, y)
{
    var board = document.getElementById('Board');
    
    var leftEdge = parseInt(board.style.left);
    var right = parseInt(board.style.width) - 60;
    var topEdge = parseInt(board.style.top);
    var bottom = parseInt(board.style.height) - 50;
    
    if(x < leftEdge || x > right || y < topEdge || y > bottom)
    {
        oElem.style.left = firstX + 'px';
        oElem.style.top = firstY + 'px';
    }
    
    release();
}

both works fine but when adding more images it seems like they can exceed the position of each other as the new one to the old one.
Any idea?!

[Bassem]

Hey just try to add to images; img1 and img2. Then move img1 to any valid pos, now try to put img2 on the left of img1. Whats happen? I get back; invalid pos. Why?
Please, anyone tell me!

Kind regards,
Bassem

[acoder]

What's firstX and firstY? Why not restrict during dragging, so that it never exceeds the boundary.

[Bassem]

The dargHandler JavaScript library offers dragging to the element attached and invokes functions dragBegin, darg, and dragEnd.
I use restriction in dragEnd.
firstX and firstY are x, y of the last valid position (inside the boundary).

[acoder]

I meant where are they set and how. If you can post the full code or a link, I can take a look.

[Bassem]

Here is my code:

var myDragable;
var id = 0;

var firstX;
var firstY;

function createTerminal(src)
{
    var myid = 'my' + id++ + 'Terminal';
    var img = document.createElement("img");
    img.id = myid;
    img.src = src;
    img.style.position = "relative";
    img.style.width = '60px';
    img.style.height = '50px';
    
    var con = document.getElementById('Board');
    con.appendChild(img);
    
    myDragable = DragHandler.attach(img);
    myDragable.dragBegin = begin;
    //myDragable.drag = drag;
    myDragable.dragEnd = end;
}

function begin(oElem, x, y)
{
    firstX = x;
    firstY = y;
}

function end(oElem, x, y)
{
    var board = document.getElementById('Board');
    
    var leftEdge = parseInt(board.style.left);
    var right = parseInt(board.style.width) - 60;
    var topEdge = parseInt(board.style.top);
    var bottom = parseInt(board.style.height) - 50;
    
    if(x < leftEdge || x > right || y < topEdge || y > bottom)
    {
        oElem.style.left = firstX + 'px';
        oElem.style.top = firstY + 'px';
    }
}

And the library I use is here.

[acoder]

The problem is that the second image will be at 60,50 which will be 0,0 (x,y) for that image when dragged, so it will exceed the boundary. You could make it absolute instead of relative.

[Bassem]

Now the absolute position works fine.

Thanks a lot for your help.

[acoder]

No problem, you're welcome :)