CODEWITHSUNDEEP
javascriptjquerycsshtml
user1777711
user1777711

Reputation: 1744

HTML5 Drag and Drop Issue

Thanks for looking at this post

I got a jsFiddle page up to demonstrate my issue my js fiddle

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
        #div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
        #div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        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));
        }
    </script>
</head>
<body>
    <center>
        <p>Drag the image you want into this box!</p>
        <table>
            <tr>
                <td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                <td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                <td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            </tr>
        </table>
    <img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
    <img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
    <img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
</body>
</html>

Basically what happen is when I drag the image into the div above ( there 3 div ) , I want to able to have the image remain where it is and not disappear from its original location.

The div which the image is drag into should capture the image also, should new object is drag into the same div (which previously already drop another image), the new image should overwrite the old image.

Another question is If I have a submit button with form post, by taking value of div1,div2,div3, will the browser able capture user input ? e.g drag1 , drag2 or drag3.

Anyone can help me solve the issue, Thanks for helping !!

Updated using this jsFiddle:

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}

Using the answer below, the original image retain. but issue is if i drag another picture in a box that already got image, it won't overwrite.

Upvotes: 0

Views: 1998

Answers (2)

Pushpender Sharma
Pushpender Sharma

Reputation: 66

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html("");
$('#'+ev.target.id).html(new_img);
}

Try this if it works.

Upvotes: 0

Nauphal
Nauphal

Reputation: 6192

I have made some changes to your drop function.

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}

try this

Upvotes: 1

Related Questions