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 demostrates 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>

PROMOTIONS