Search the Community

Hi, I have a script that works properly, shows an image and you can drag and drop that image. But my problem is: how I can add more images? I thought copying the code would appear another image, but it is not. Thank you. <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script><script defer="defer">function drawImage(imageObj) { var stage = new Kinetic.Stage({container: "container",width: 800,height: 600});var layer = new Kinetic.Layer();// darth vadervar darthVaderImg = new Kinetic.Image({image: imageObj,x: 100,y: 30,width: 40,height: 40,draggable: true});// add cursor stylingdarthVaderImg.on('mouseover', function() {document.body.style.cursor = 'pointer';});darthVaderImg.on('mouseout', function() {document.body.style.cursor = 'default';});layer.add(darthVaderImg);stage.add(layer);}var imageObj = new Image();imageObj.onload = function() {drawImage(this);};imageObj.src = 'adorno1.png';</script>

I tried one of w3schools tried-and-true "tryit"s in the up-to-date version of Chrome and it didn't work. Here it is: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop But it works in Firefox and Safari. This close-cousin demo http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2 also fails in Chrome but not in FF or Safari. But when I tried this similar drag and drop demo in Chrome: http://html5demos.com/drag it worked and it also works in FF and Safari. Any ideas why the two W3 demos don't work in Chrome? Maybe my Chrome preferences are slightly wrong.

There are 2 images, and 2 locations, lets named it img1, img2, loc1, and loc2. What im trying to do is drag and drop img1 to loc1, which mean i don't want img1 to be drop in loc2, i want the specific image drop on specific location. function dropIn(evt){var root = document.getElementsByTagName("body")[0];evt.preventDefault();var id = evt.dataTransfer.getData("text");if(ev.target.getAttribute('data-drop') == id)ev.target.appendChild(document.getElementById(id));}<div id="box1" style="position: absolute; top: 220px; left: 220px;" ondragover="dragIn();" ondrop="dropIn();" ><img id="img1" class="resize" src="wreck.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div><div id="loc1" data-drop="img1" style="border:1px solid black; position:absolute; left:400px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" ></div><div id="box2" style="position: absolute; top: 220px; left: 300px;" ondragover="dragIn();" ondrop="dropIn();" ><img id="img2" class="resize" src="nah.jpg" ondragstart="dragBegin()" draggable="true" style="cursor:move;"/></div><div id="loc2" data-drop="img2" style="border:1px solid black; position:absolute; left:560px; top:150px; width:160px; height:200px;"ondragover="dragIn();" ondrop="dropIn();" so far the code above allow me to achieve what i want, but its not perfect, when i drop img1 to loc2, it did nothing. What i really want is when i drop img1 to loc2, the img1 is still dropped on the loc1. No matter where the img1 will be drop by user, the result of img1 will still be dropped on loc1, and same goes to img2, it will always be dropped on the loc2.I tried this but its not working if(evt.target.getAttribute('data-drop') == id){evt.target.appendChild(document.getElementById(id));}else{evt.target.appendChild(document.getElementsByAttribute('data-drop'));} is there any soloution for me? Thanks alot

I know that HTML5 provides Drag and Drop and is a powerful tool for it. However I just used it successfully for dragging and dropping HTML elements, HTML codes and Files. What other thing can I do with this feature? For example can I drag an address from the address bar and drop it on a text box? or can I do it reversely?