Drag and Drop functionality

Drag and Drop Events

Drag-and-drop functionality enables users to pick up an element with the mouse and place it in another location. The following Table lists the events related to drag-and-drop functionality.

Event	Description
drag	Raised continuously while the element is being dragged
dragend	Raised on the element being dragged when the mouse is released to end the drop operation
dragenter	Raised on a target element when a dragged element is dragged into its space
dragleave	Raised on a target element when a dragged element leaves its space
dragover	Raised continuously on the target element while the dragged element is being dragged over it
dragstart	Raised on the element being dragged when the drag operation is beginning
drop	Raised on the target element when the dragged element is released

A lot happens in a drag-and-drop operation. The following table lists all the events that occurs during a drag-and-drop operation.

Nr	Drag Source	Drog Target	Action
1	dragstart		Fires on drag source as dragging begins
2	drag		Fires on drag source as dragging occurs
3		dragenter	Fires on drop target when drag source enters its boundaries
4		dragover	Fires on drop target as drag source is being dragged inside its boundaries
5		dragleave	Fires on drop target when drag source is dragged outside the target’s boundaries
6		drop	Fires on drop target when the mouse button is released on the drag source while inside the target’s boundaries
7	dragend		Fires on drag source when dragging is complete

You can use all these events in combination to provide visual feedback to users that the drag operation is occurring and what might be a potentially valid drop location.

The following code demonstrates the drag-and-drop functionality:

<head>
<title></title>
<style>
    [data-role="drag-drop-container"] {
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 3px solid #ddd;
        border-radius: 4px;
    }
    .over {
        background-color: #ffc;
    }
    [draggable="true"] {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        /* Support old versions of WebKit */
        -khtml-user-drag: element;
        -webkit-user-drag: element;
    }
    .drag {
        opacity: 0.25;
    }
</style>
</head>
<body>
    <div id="result-stub" class="well hidden">
        <div id="source-container" data-role="drag-drop-container">
            <img id="ps-logo" draggable="true" src="image.png" />
        </div>
        <div id="target-container" data-role="drag-drop-container"></div>
        <input type="submit" onclick="dragdrop()" value="Run" />
        <div style="clear:both;"></div>
    </div>
<script data-step="2" data-label="Basics (with role selectors)">
        var dragdrop = function() {
            var sourceContainerId = '',
                dragStart = function(e) {
                    try {
                        e.dataTransfer.setData('text/plain', e.target.id);
                    } catch (ex) {
                        e.dataTransfer.setData('Text', e.target.id);
                    }
                    sourceContainerId = this.parentElement.id;
                },
                dropped = function(e) {
                    if (this.id !== sourceContainerId) {
                        cancel(e);
                        var id;
                        try {  id = e.dataTransfer.getData('text/plain');
                        } catch (ex) {
                            id = e.dataTransfer.getData('Text');
                        }
                        e.target.appendChild(
                            document.querySelector('#' + id));
                    }
                },
                cancel = function(e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                    return false;
                },
            forEach = Array.prototype.forEach;
            var selector = '[data-role="drag-drop-container"]',
                dc = document.querySelectorAll(selector);
            forEach.call(dc, function(c) {
                c.addEventListener('drop', dropped, false);
                c.addEventListener('dragenter', cancel, false);
                c.addEventListener('dragover', cancel, false);
            });
            var selector = '[draggable="true"]',
                ds = document.querySelectorAll(selector);
            forEach.call(ds, function(source) {
                source.addEventListener('dragstart', dragStart, false);
            });
        }
</script>
</body>

Ads Right