Drag/Drop

[edsanimate_start entry_animation_type= “flipInX” entry_delay= “1” entry_duration= “1” entry_timing= “ease-in” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “”]

The tool is used to drag any image/object and drop it on different location.

If the text/object is to be placed in different location the user drags the text/object by holding on the mouse pointer on the draggable object and drop the object using release the mouse pointer in a valid target or location.

If you set the attribute as draggable=”true” then the object is draggable otherwise the object is not draggable.

The types of event handlers to link objects are

Event handlers Description
ondrag when text is being dragged
ondragstart when user start dragging
ondragenter when drag text enter in a drop location
ondragover when drag text over in a drop location
ondragleave when drag text leaves a drop location
ondragend when a drag is being ended
ondrop when text ends in a drop location 

Sample code

<!DOCTYPE HTML>

<html>

<head>

<title>drag and drop</title>

<style>

.dg1, .dg2, .dg3

{

float: center;

margin: 12px; padding: 12px;

border: 5px solid pink;

width: 200px; height: 150px;

}

</style>

<script>

function drag(event)

{

event.dataTransfer.setData(“data”, event.target.id);

}

function drop(event)

{

event.preventDefault();

var data = event.dataTransfer.getData(“data”);

event.target.appendChild(document.getElementById(data));

}

function startDrop(event)

{

event.preventDefault();

}

</script>

</head>

<body>

<p>Select image to drag/drop</p>

<div class=”dg1″ ondrop=”drop(event)” ondragover=”startDrop(event)”>

<img src=”images.jpg” draggable=”true” ondragstart=”drag(event)” id=”drag1″

width=”200″ height=”150″>

</div>

<div class=”dg2″ ondrop=”drop(event)” ondragover=”startDrop(event)”></div>

<div class=”dg3″ ondrop=”drop(event)” ondragover=”startDrop(event)”></div>

</body>

</html>

[edsanimate_end]