CODEWITHSUNDEEP
htmldrag-and-dropdraggable
Kim Stacks
Kim Stacks

Reputation: 10812

how to drag and drop a copy of another drag-n-dropped image using html5?

I have an implementation of using drag and drop for upload purposes using examples from http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

This is what it looks like when it works.

The droparea is a div that I call dropArea.

Now the problem is out of the supposed 4 images I have drag-n-dropped, I then wished to select two of them to be of a special status. For eg, I want to inform the server that image 1 and 3 are to be sneaks.

I want to be able to drag and drop image 1 and 3 already in the div element into 2 drawn divs

http://cl.ly/image/3T3O410X2E40

I realize I am not able to do this so far.

Main reason being that I am unable to add in the ondragstart attribute to the images created in the dropArea div.

I am able to add in the draggable attribute.

So I get html code that reads like this after I drag and drop into dropArea div.

Can I get the effect the way I want it as described?

if not, are there alternative ways to achieve the same outcome without using drag and drop? Perhaps right click on the drag-n-dropped image and select them as sneaks?

UPDATE: I realize I needed to add an id attribute, so now the drag and drop effect of another drag-n-dropped image inside dropArea works.

But I want to drag and drop a copy and not the original image. Hence I still need help with this.

Upvotes: 1

Views: 8931

Answers (2)

user1509104
user1509104

Reputation: 132

I realise this question is over 4 years old, but maybe someone else might also need this information :)

So as shrishaster asked in the comments on Kim Stacks answer: "How can i do same thing for Texts instead of Images?"

The fix for this is a minor tweak on the dropcopy function given by Kim Stacks:

function dropcopy(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("p");
var original = document.getElementById(data);
copyimg.innerHTML = original.innerHTML;
ev.target.appendChild(copyimg);

}

By doing this you make a clone of the original paragraf content :)

I hope this will help at least some.

Upvotes: 1

Kim Stacks
Kim Stacks

Reputation: 10812

there are 2 parts to this answer

  1. Ensure that you assign an unique id attribute to the drag-n-dropped image
  2. Use the following javascript functions copied from http://www.w3schools.com/html5/html5_draganddrop.asp but include a new one called dropcopy

These are the functions from the w3schools example

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

This is the new one for dropcopy

                    function dropcopy(ev)
                    {
                    ev.preventDefault();
                    var data=ev.dataTransfer.getData("Text");
                    var copyimg = document.createElement("img");
                    var original = document.getElementById(data);
                    copyimg.src = original.src;
                    ev.target.appendChild(copyimg);

                    }

Then for the div that requires a copy just make sure you use the dropcopy for the ondrop attribute

<div id="div2" class="sneaks" ondrop="dropcopy(event)"
                ondragover="allowDrop(event)"></div>

Upvotes: 0

Related Questions