By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

Dynamic create DragPanel extender on client side

100+
P: 344
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!
Mar 11 '09 #1
Share this Question
Share on Google+
30 Replies


acoder
Expert Mod 15k+
P: 16,027
This DragPanel seems like some ASP.NET control. If you want a pure client-side solution, try something like this or this.
Mar 11 '09 #2

100+
P: 344
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
Expand|Select|Wrap|Line Numbers
  1. var id = 0;
  2.  
  3. function createTerminal(src)
  4. {
  5.     var img = document.createElement('img',img);
  6.     var theid = 'my' + id + 'img';
  7.  
  8.     id = id + 1;
  9.     img.setAttribute('id',theid);
  10.     img.style.height = 55;
  11.     img.style.width = 60;
  12.     //img.setAttribute('style','position: relative; width: 40px; height: 40px;');
  13.  
  14.     img.src = src;
  15.  
  16.     //DragHandler.attach(document.getElementById(theid));
  17.     var loc = document.getElementById('Board');
  18.     loc.appendChild(img);
  19. }
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
Mar 12 '09 #3

acoder
Expert Mod 15k+
P: 16,027
Change line 5 to:
Expand|Select|Wrap|Line Numbers
  1. 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.
Mar 12 '09 #4

100+
P: 344
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.
Expand|Select|Wrap|Line Numbers
  1. function IMG1_onclick() {
  2. var img = document.createElement("<img id='img1' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");
  3. var con = document.getElementById('container');
  4. con.appendChild(img);
  5. var dragable4 = DragHandler.attach(img);
  6.     dragable4.dragBegin = begin;
  7.     dragable4.drag = drag;
  8.     dragable4.dragEnd = end;
  9. }
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
Mar 12 '09 #5

acoder
Expert Mod 15k+
P: 16,027
The other values for style.position are "static" (the default) and "fixed". Both of these could not work with dragging. See this page.
Mar 13 '09 #6

Frinavale
Expert Mod 5K+
P: 9,731
Out of curiosity, Bassem, are you just reusing the same DragPanel extender for each image?
Mar 13 '09 #7

100+
P: 344
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
Mar 13 '09 #8

Frinavale
Expert Mod 5K+
P: 9,731
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.
Mar 13 '09 #9

100+
P: 344
I'm new in JavaScript, but it seems to me it's working, here's my code:
Expand|Select|Wrap|Line Numbers
  1. var myDragable;
  2. var id = 0;
  3.  
  4. function IMG1_onclick() {
  5. var myid = 'my' + id++ + 'img';
  6. var img = document.createElement("<img id='" + myid + "' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");
  7. var con = document.getElementById('container');
  8. con.appendChild(img);
  9. myDragable = DragHandler.attach(img);
  10. myDragable.dragBegin = begin;
  11. myDragable.drag = drag;
  12. 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!
Mar 13 '09 #10

Frinavale
Expert Mod 5K+
P: 9,731
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...which 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
Mar 15 '09 #11

acoder
Expert Mod 15k+
P: 16,027
Just a word of caution:

line 6 in your posted code is technically incorrect, but will work in IE:
Expand|Select|Wrap|Line Numbers
  1. var img = document.createElement("<img id='" + myid + "' src='laptop-icon.gif' style='position: relative; width: 70px; height: 70px;'>");
It should be something like:
Expand|Select|Wrap|Line Numbers
  1. var img = document.createElement("img");
  2. img.id = myid;
  3. img.src = 'laptop-icon.gif';
  4. img.style.position = "relative";
  5. // and so on...
Mar 16 '09 #12

100+
P: 344
I'm using safari and works fine!
Why this syntax isn't correct? I've seen this in a tutorial before!!!
Mar 16 '09 #13

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 17 '09 #14

100+
P: 344
Thanks, I'm working on the standard.
Mar 21 '09 #15

100+
P: 344
I was trying to solve this problem to avoid posting more question.

My problem with the elements (img) created using document.createElement 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
Mar 21 '09 #16

acoder
Expert Mod 15k+
P: 16,027
Post your code, so I can see what might be causing the problem.
Mar 21 '09 #17

100+
P: 344
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,
Expand|Select|Wrap|Line Numbers
  1. function createTerminal(src)
  2. {
  3.     var myid = 'my' + id++ + 'Terminal';
  4.     var img = document.createElement("img");
  5.     img.id = myid;
  6.     img.src = src;
  7.     img.style.position = "relative";
  8.     img.style.width = '60px';
  9.     img.style.height = '55px';
  10.     var con = document.getElementById('PanelBoard');
  11.     con.appendChild(img);
  12.     myDragable = DragHandler.attach(img);
  13.     myDragable.dragEnd = end;
  14. }
Mar 22 '09 #18

acoder
Expert Mod 15k+
P: 16,027
You've not defined dragBegin and drag.
Mar 28 '09 #19

100+
P: 344
Yes I didn't but that is not what causes the problem.
Mar 28 '09 #20

acoder
Expert Mod 15k+
P: 16,027
There must be something else affecting the code. The simple demo uses position:relative and everything works fine. Post the rest of your code or a link.
Mar 31 '09 #21

100+
P: 344
I use this function to create an image and append it to a div
Expand|Select|Wrap|Line Numbers
  1. function createTerminal(src)
  2. {
  3.     var myid = 'my' + id++ + 'Terminal';
  4.     var img = document.createElement("img");
  5.     img.id = myid;
  6.     img.src = src;
  7.     img.style.position = "relative";
  8.     img.style.width = '60px';
  9.     img.style.height = '50px';
  10.  
  11.     var con = document.getElementById('Board');
  12.     con.appendChild(img);
  13.  
  14.     myDragable = DragHandler.attach(img);
  15.     myDragable.dragBegin = begin;
  16.     //myDragable.drag = drag;
  17.     myDragable.dragEnd = end;
  18. }
and this function reset the image position if it is outside the div, to the last valid one
Expand|Select|Wrap|Line Numbers
  1. function end(oElem, x, y)
  2. {
  3.     var board = document.getElementById('Board');
  4.  
  5.     var leftEdge = parseInt(board.style.left);
  6.     var right = parseInt(board.style.width) - 60;
  7.     var topEdge = parseInt(board.style.top);
  8.     var bottom = parseInt(board.style.height) - 50;
  9.  
  10.     if(x < leftEdge || x > right || y < topEdge || y > bottom)
  11.     {
  12.         oElem.style.left = firstX + 'px';
  13.         oElem.style.top = firstY + 'px';
  14.     }
  15.  
  16.     release();
  17. }
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?!
Apr 14 '09 #22

100+
P: 344
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
Apr 14 '09 #23

acoder
Expert Mod 15k+
P: 16,027
What's firstX and firstY? Why not restrict during dragging, so that it never exceeds the boundary.
Apr 14 '09 #24

100+
P: 344
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).
Apr 14 '09 #25

acoder
Expert Mod 15k+
P: 16,027
I meant where are they set and how. If you can post the full code or a link, I can take a look.
Apr 16 '09 #26

100+
P: 344
Here is my code:
Expand|Select|Wrap|Line Numbers
  1. var myDragable;
  2. var id = 0;
  3.  
  4. var firstX;
  5. var firstY;
  6.  
  7. function createTerminal(src)
  8. {
  9.     var myid = 'my' + id++ + 'Terminal';
  10.     var img = document.createElement("img");
  11.     img.id = myid;
  12.     img.src = src;
  13.     img.style.position = "relative";
  14.     img.style.width = '60px';
  15.     img.style.height = '50px';
  16.  
  17.     var con = document.getElementById('Board');
  18.     con.appendChild(img);
  19.  
  20.     myDragable = DragHandler.attach(img);
  21.     myDragable.dragBegin = begin;
  22.     //myDragable.drag = drag;
  23.     myDragable.dragEnd = end;
  24. }
  25.  
  26. function begin(oElem, x, y)
  27. {
  28.     firstX = x;
  29.     firstY = y;
  30. }
  31.  
  32. function end(oElem, x, y)
  33. {
  34.     var board = document.getElementById('Board');
  35.  
  36.     var leftEdge = parseInt(board.style.left);
  37.     var right = parseInt(board.style.width) - 60;
  38.     var topEdge = parseInt(board.style.top);
  39.     var bottom = parseInt(board.style.height) - 50;
  40.  
  41.     if(x < leftEdge || x > right || y < topEdge || y > bottom)
  42.     {
  43.         oElem.style.left = firstX + 'px';
  44.         oElem.style.top = firstY + 'px';
  45.     }
  46. }
And the library I use is here.
Apr 16 '09 #27

acoder
Expert Mod 15k+
P: 16,027
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.
Apr 20 '09 #28

100+
P: 344
Now the absolute position works fine.

Thanks a lot for your help.
Apr 21 '09 #29

acoder
Expert Mod 15k+
P: 16,027
No problem, you're welcome :)
Apr 22 '09 #30

P: 14
Hi All,

I working on same scenario mentioned in the thread suject, need to click the image in the panel and create the same in a container which should be movable.Can you please post the full code for me to check and use in my apps.
Thanks in advance
Sep 13 '10 #31

Post your reply

Sign in to post your reply or Sign up for a free account.