axanon Posted October 31, 2013 Share Posted October 31, 2013 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 Link to comment Share on other sites More sharing options...
davej Posted November 1, 2013 Share Posted November 1, 2013 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. Link to comment Share on other sites More sharing options...
Hadien Posted November 1, 2013 Share Posted November 1, 2013 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. Link to comment Share on other sites More sharing options...
davej Posted November 3, 2013 Share Posted November 3, 2013 How can you keep it from messing up when you try to drag twice? Link to comment Share on other sites More sharing options...
Hadien Posted November 3, 2013 Share Posted November 3, 2013 "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;} Link to comment Share on other sites More sharing options...
davej Posted November 3, 2013 Share Posted November 3, 2013 Oh, is that all it was? I didn't know what it was doing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now