Jump to content
axanon

Drag'n'Drop with Clone

Recommended Posts

hi there!

 

i try to find out if there is a script like this, but with additional cloning-feature: http://www.w3schools.com/html/html5_draganddrop.asp

 

what i want: some grafic-tiles to drag and drop in another area (definied/undefinied), but when i drag one of these tiles, i want

to make a clone of the original. means: i can drag unlimited tiles from the original one to another place...

 

is this possible in HTML5?

 

i tried it with java, but stuck with the clone-script...

http://www.those.ch/zweitform/dragndrop/js_v1/konfigurator1.htm

 

 

thanks in advice!

Luz

Share this post


Link to post
Share on other sites

I don't see that what you are describing should be very difficult. All I think you would need to do is include an element creation in the drop code that would replace the dropped element in its original location.

 

I'm feeling a little confused about drag-and-drop right now because it seems to me that you could use drag-and-drop or you could use the mouse-position to create something that looks like drag-and-drop, and I'm not sure of the advantages/disadvantages of each.

Share this post


Link to post
Share on other sites

you need you use the DOM method cloneNode(). you could try and use the DataTransfer object but I don't see alot of documentation on it, and the documentation I do see seems to imply that it can't actually transport node, just text (and links, it seems dataTransfer was intended for links not actual dom manipulation).

<!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script>var draggedEl;var newId = 0;function allowDrop(ev){ev.preventDefault();} function drag(ev){    draggedEl = ev.target.cloneNode(true);    draggedEl.id = draggedEl.id+(newId++);    draggedEl.ondrop = undefined;    draggedEl.ondragover = undefined;    draggedEl.ondragstart = undefined;} function drop(ev){ev.preventDefault(); var el =ev.target; //if you inccidently drop the element inside an element which is inside the drop box,// navigate up to the drop box inorder to appendif(el.id != "div1"){    while(el.id!= "div1"){      if(el.nodeName == "BODY")         throw "could not drop element!!";           el = el.parentElement;    }} el.appendChild(draggedEl);}</script></head><body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body></html> 

I slightly modified the code for the w3schools's tryit tutorial on the same drag and drop tutorial. notice that I specifically modified the dragged elements id the moment its cloned, before its appended back into the dropped area if you don't it will have problems making extra copies (plus its just bad for multiple elements to have the same ID). of course the html in the tutorial isn't exactly pretty, but Im sure its in the realms of what you're looking for.

Share this post


Link to post
Share on other sites

"messing up"? what, with the new images overflowing over the original image?

#div1 {width:700px;height:300px;padding:10px;border:1px solid #aaaaaa;overflow:auto;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...