CODEWITHSUNDEEP
javascripthtml
Prasad_Joshi
Prasad_Joshi

Reputation: 662

dropped element not visible

I have a image that gets dropped,but it is not visible here after when Element is dropped.Message gets displayed but the image is not visible when actually dropped.
Dropped Element is not visible when it is dropped. I know problem may be with appendchild, But I can't figure out why it is not working.

here is my code: CSS

.droptarget {
        float: left;
        width: 100px;
        height: 35px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    .auto-style1 {
        float: left;
        width: 100px;
        height: 35px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
        text-align: right;
    }

Javascript

  function startDrag(event) {
        event.dataTransfer.setData("Text", event.target.id);
        document.getElementById('demo').innerHTML = 'You started to Drag!!';
    }

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

    function drop(event) {
        event.preventDefault();
        var dropElement = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById('dropElement'));
        document.getElementById('demo').innerHTML = 'Element Dropped!!';
    }

HTML

  <div class="auto-style1">
                <img id="Drag1" src="../Downloads/Nobi.jpg" style="width:34px" height="45px" draggable="true" ondragstart="startDrag(event)" ondragover="allowDrop(event)" />

            </div>
            <div class="droptarget" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)">

            </div>
            <p id="demo"> </p>

Upvotes: 3

Views: 336

Answers (1)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Try This

Here is the Demo

Here is the Reverse Case Demo

Reverse Case HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img ondragstart="drag(event)" draggable="true" title="drag here" id="myImage" src="http://www.rw-designer.com/res/oism.png" />

</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Try Using this Code

HTML

<h1>Drag and Drop</h1>
<span draggable="true" id="div1"  ondragstart="drag(event)">
        <img title="drag here" id="myImage" src="http://www.rw-designer.com/res/oism.png" />
</span>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Javascript

function drag(ev)
{
//alert('dragged');
ev.dataTransfer.setData("dk",ev.target.id)
} 
function drop(ev)
{
ev.preventDefault();

    var data = ev.dataTransfer.getData("dk");
    ev.target.appendChild(document.getElementById(data));
}

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

}

Upvotes: 3

Related Questions