Drag the JavaScript event simulation elements

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

One, foreword:

Recently to achieve an element drag and drop effect, Drag the mouse elements and positioning elements, The first thought is HTML5 drag and drop, In HTML5, Have a draggable attribute, And there are dragstart, dragover, drop and other events, Mainly through the event.dataTransfer object methods, The data set in the dragstart event (event.dataTransfer.setData); data acquisition in drop events (event.dataTransfer.getData); but it can not realize real-time drag and drop effect element, So the need to use the mouse to drag and drop event simulation elements.


Two, the real example diagram 



Three, the realization principle:

1,Method: the mouse in order to trigger MouseDown, MouseMove, mouseup events, MouseMove events in real-time computing element position and orientation elements,

Cancellation in the mouseup event MouseMove, mouseup event.


2,Key: if all events are bound to drag elements, when the mouse moves very fast, so that the left drag elements, then don't execute MouseMove,

The mouseup event handler, so want to let MouseMove, mouseup event processing is performed in real time, they must be bound to a document element,


Four, the plug-in source code:

$.fn.extend({
    /**
     * 
     * Extended jQuery prototype, realize the mouse event simulation elements drag
     * The callback function this in drag to drag elements
     * @ method: drag
     * @ use: $( selector ).drag( dragStart, dragMove, dragEnd )
     * @ param { function } The first parameter, ready to drag the processing function
     * @ param { function } The second parameter, processing function in drag
     * @ param { function } The third parameter, drag the end processing function 
     * @ reutrn { jQuery( selector ) }
     *
     */
    drag: function( dragStart, dragMove, dragEnd ) {
        function drag( dragElem, event ) {
            var offsetX, offsetY, beforePageX, beforePageY;

            if ( $.isFunction(dragStart) ) {
                dragStart.apply(dragElem, arguments);
            }

            // Element position or move in
            offsetX = parseInt( $(dragElem).css('left'), 10 );
            offsetY = parseInt( $(dragElem).css('top'), 10 );

            // Before moving or moving the position of the mouse
            beforePageX = event.clientX;
            beforePageY = event.clientY;

            if ( document.addEventListener ) {
                document.addEventListener('mousemove', moveHandle, false);
                document.addEventListener('mouseup', upHandle, false);
            }
            else if ( document.attachEvent ) {
                dragElem.setCapture(); // The dragElem mouse event inheritance to document capture
                dragElem.attachEvent('onmousemove', moveHandle);
                dragElem.attachEvent('onmouseup', upHandle);
                dragElem.attachEvent('onlosecapture', upHandle);
            }

            // Mobile mouse event handling
            function moveHandle (event) {
                var event = event || window.event;

                // Update the element position or move after the termination of the
                var x = offsetX + event.clientX - beforePageX;
                var y = offsetY + event.clientY - beforePageY;

                $(dragElem).css({
                    left: x + 'px',
                    top: y + 'px'
                });

                // Stop the propagation of the event
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragMove) ) {
                    dragMove.apply(dragElem, arguments);
                }
            }

            // The mouse up event processing
            function upHandle (event) {
                if ( document.addEventListener ) {
                    document.removeEventListener('mousemove', moveHandle, false);
                    document.removeEventListener('mouseup', upHandle, false);
                }
                else if ( document.detachEvent ) {
                    dragElem.detachEvent('onlosecapture', upHandle);                
                    dragElem.detachEvent('onmouseup', upHandle);
                    dragElem.detachEvent('onmousemove', moveHandle);
                    dragElem.releaseCapture();
                }
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragEnd) ) {
                    dragEnd.apply(dragElem, arguments);
                }
            }
        }
        $(this).each(function(){
            $(this).bind('mousedown', function(e){
                var dragElem = this,
                    event = e;
                drag(dragElem, event);
            });
        });
        return this;
    }
});

Five, call the instance:

(function(){
    var dragEnd = false;
    $('.drag-elem').drag(
        function(){
            $(this).text('Ready to drag').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        function(){
            var offset = $(this).offset();
            dragEnd = true;
            $(this).text('Drag in(' +  offset.left + ',' + offset.top + ')' );
        },
        function(){
            if (dragEnd) {
                $(this).text('Drag the end');
                dragEnd = false;
            }
        }
    );
}());

Six, complete example code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery drag</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<style>
.drag-elem {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 999;
    width: 200px;
    height: 50px;
    cursor: move;
    background-color: #ccc;
    border: 5px solid green;
    font-size: 24px;
    line-height: 50px;
    text-align: center;    
}
</style>
</head>

<body>

<div class="drag-elem"></div>

<script>
$.fn.extend({
    /**
     * 
     * Extended jQuery prototype, realize the mouse event simulation elements drag
     * The callback function this in drag to drag elements
     * @ method: drag
     * @ use: $( selector ).drag( dragStart, dragMove, dragEnd )
     * @ param { function } The first parameter, ready to drag the processing function
     * @ param { function } The second parameter, processing function in drag
     * @ param { function } The third parameter, drag the end processing function 
     * @ reutrn { jQuery( selector ) }
     *
     */
    drag: function( dragStart, dragMove, dragEnd ) {
        function drag( dragElem, event ) {
            var offsetX, offsetY, beforePageX, beforePageY;

            if ( $.isFunction(dragStart) ) {
                dragStart.apply(dragElem, arguments);
            }

            // Element position or move in
            offsetX = parseInt( $(dragElem).css('left'), 10 );
            offsetY = parseInt( $(dragElem).css('top'), 10 );

            // Before moving or moving the position of the mouse
            beforePageX = event.clientX;
            beforePageY = event.clientY;

            if ( document.addEventListener ) {
                document.addEventListener('mousemove', moveHandle, false);
                document.addEventListener('mouseup', upHandle, false);
            }
            else if ( document.attachEvent ) {
                dragElem.setCapture(); // The dragElem mouse event inheritance to document capture
                dragElem.attachEvent('onmousemove', moveHandle);
                dragElem.attachEvent('onmouseup', upHandle);
                dragElem.attachEvent('onlosecapture', upHandle);
            }

            // Mobile mouse event handling
            function moveHandle (event) {
                var event = event || window.event;

                // Update the element position or move after the termination of the
                var x = offsetX + event.clientX - beforePageX;
                var y = offsetY + event.clientY - beforePageY;

                $(dragElem).css({
                    left: x + 'px',
                    top: y + 'px'
                });

                // Stop the propagation of the event
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragMove) ) {
                    dragMove.apply(dragElem, arguments);
                }
            }

            // The mouse up event processing
            function upHandle (event) {
                if ( document.addEventListener ) {
                    document.removeEventListener('mousemove', moveHandle, false);
                    document.removeEventListener('mouseup', upHandle, false);
                }
                else if ( document.detachEvent ) {
                    dragElem.detachEvent('onlosecapture', upHandle);                
                    dragElem.detachEvent('onmouseup', upHandle);
                    dragElem.detachEvent('onmousemove', moveHandle);
                    dragElem.releaseCapture();
                }
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragEnd) ) {
                    dragEnd.apply(dragElem, arguments);
                }
            }
        }
        $(this).each(function(){
            $(this).bind('mousedown', function(e){
                var dragElem = this,
                    event = e;
                drag(dragElem, event);
            });
        });
        return this;
    }
});
</script>


<script>
(function(){
    var dragEnd = false;
    $('.drag-elem').drag(
        function(){
            $(this).text('Ready to drag').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        function(){
            var offset = $(this).offset();
            dragEnd = true;
            $(this).text('Drag in(' +  offset.left + ',' + offset.top + ')' );
        },
        function(){
            if (dragEnd) {
                $(this).text('Drag the end');
                dragEnd = false;
            }
        }
    );
}());
</script>
</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Lorin at November 16, 2013 - 2:24 AM