Dynamic create DragPanel extender on client side

[Bassem]

Hi,
I've two div.s. One contains four images, when click on one, a JS function create an image corresponding to it and append it to the second div.
I'm attempting to make each new image is to be movable.
I'm trying for three days with many searches to create a DragPanel and set its TargetControlID to the certian images on the client side. I also tried to set the one only DragPanel's TragetControlID property to each image on focus.

Anyone knows how to do one of the two ways, I'm looking for!
appreciating any help!

[acoder]

This DragPanel seems like some ASP.NET control. If you want a pure client-side solution, try something like this or this.

[Bassem]

Thanks a lot for your reply,
I tried this, it helped me but I've a problem creating a new image and attach it to the DragHandler

var id = 0;

function createTerminal(src)
{
    var img = document.createElement('img',img);
    var theid = 'my' + id + 'img';
    
    id = id + 1;
    img.setAttribute('id',theid);
    img.style.height = 55;
    img.style.width = 60;
    //img.setAttribute('style','position: relative; width: 40px; height: 40px;');
    
    img.src = src;
    
    //DragHandler.attach(document.getElementById(theid));
    var loc = document.getElementById('Board');
    loc.appendChild(img);
}

the image(or any control) must be relative position. The first commented line gives me error so i set both height and width in separated statements.
Also I've a problem to set the id of image element dynamically - the second commented line, I appreciate your help, Can anybody help me in?!
Thanks again acoder

[acoder]

Change line 5 to:

var img = document.createElement('img');

Give a unit to the height/width, e.g. "55px".
You also need to define dragBegin/drag/dragEnd for the draggable object: see demo source on the webtoolkit link.

[Bassem]

Thanks very much!!!
Now it's working fine.
I added some DHTML to create the image, to have absolute position. And appended the var img directly without looking to the id, and then retrieve the element again from it. This loop appears in line 6 and 16.

function IMG1_onclick() {
var img = document.createElement("<img id='img1' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");
var con = document.getElementById('container');
con.appendChild(img);
var dragable4 = DragHandler.attach(img);
	dragable4.dragBegin = begin;
	dragable4.drag = drag;
	dragable4.dragEnd = end;
}

There's one question left - if you've time to answer - the webtoolkit demo source made a restriction to the elements to be dragable, is to have a relative or absolute position!
Is there other type of position? When an element is created, it can have no relative or absolute position?

Thanks for your great help,
Bassem

[acoder]

The other values for style.position are "static" (the default) and "fixed". Both of these could not work with dragging. See this page.

[Frinavale]

Out of curiosity, Bassem, are you just reusing the same DragPanel extender for each image?

[Bassem]

Thanks acoder, again and again.
I saw the link, and now I understand why the restriction of relative or absolute is set to.

Not yet Frinavale,
I just was trying the code, to reuse the same DragPanel, I've to add some complexity, attaching the image on focus - didn't try it yet.

Thanks acoder and Frinavale, for your help and advices

[Frinavale]

The reason I asked is because I didn't think this was possible.

I could be wrong but I believe you're going to run into some problems with validation in the future.

I'm interested to know if you're able to do this or not.

If it doesn't work, I can help you with a server side dynamic control solution.

[Bassem]

I'm new in JavaScript, but it seems to me it's working, here's my code:

var myDragable;
var id = 0;

function IMG1_onclick() {
var myid = 'my' + id++ + 'img';
var img = document.createElement("<img id='" + myid + "' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");
var con = document.getElementById('container');
con.appendChild(img);
myDragable = DragHandler.attach(img);
myDragable.dragBegin = begin;
myDragable.drag = drag;
myDragable.dragEnd = end;

Line 1, I declared myDragable once then I used it many through lines 10 - 13.
I think that's because the private field/property oElem in the webtoolkit demo code - the second link, acoder posted - isn't used and every time you pass an element to attach function, the function sets the element onmousedown property to dragBegin.
Due to there are no fields (variables) in DragHandler, no matter if it reused or not; there is no heavy.

I believe you're going to run into some problems with validation in the future.

I don't know what you meant, please explain more!

I can help you with a server side dynamic control solution.

The reason I didn't use a server-side solution is postback, I'm adding elements at the client-side, so any reloading to the page or the part contains the added elements will overwrite it (remove the user changes). Now you figure it out. I'm interested to learn more so please let me see the dynamic control solution!

[Frinavale]

It sounds like you have a working solution though.

I am just starting to get into JavaScript as well...and I now understand why your solution works (client side).

I've been getting into developing Ajax enabled server controls...whic h are a little bit different than extenders but have the same concepts behind them.

Basically, an Ajax Extender (like the DragPanel extender) has 2 aspects to it: .Net server code, and JavaScript client code.

The .NET server code lets you use the control in your server side code. You can set properties and call methods that will determine how the control will act when it is sent to the browser. The .NET server extender uses a JavaScript (.js) resource file. This JavaScript resource file contains implementation for a JavaScript Object that represents the .NET Object client side.

Now the coolest thing about this is that the values set in the .NET Object properties are transferred to the JavaScript Object automatically for you. Sometimes the JavaScript Object is designed in such a way that information about the JavaScript Object can be retrieved by the .NET Object as well. (From my experience, this implementation requires the use of HiddenFields that can be accessed by both the Server Control and the JavaScript Control).

I have a feeling that the DragPanel extender transfers information about itself back to the server control. So, when you declare a DragPanel using JavaScript as you are now, there will not be any .NET code for it to relay information to. Therefore, it will work client side until the user posts back to the server....

I hope this makes sense.

-Frinny

[acoder]

Just a word of caution:

line 6 in your posted code is technically incorrect, but will work in IE:

var img = document.createElement("<img id='" + myid + "' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");

It should be something like:

var img = document.createElement("img");
img.id = myid;
img.src = 'laptop-icon.gif';
img.style.position = "relative";
// and so on...

[Bassem]

I'm using safari and works fine!
Why this syntax isn't correct? I've seen this in a tutorial before!!!

[acoder]

Hmm... if you look at the standard, it only expects a tag name - nothing more, nothing less. To give it HTML is invalid and an exception should be raised. Also, see https://developer.mozilla.org/en/DOM....createElement.

[Bassem]

Thanks, I'm working on the standard.