Implementing drag and drop

Question

I am trying to implement a simple Drag and Drop and was wandering if there are other methods of implementing it that doesn't require mouse down, mouse move and mouse up events. The reason is because my mouse up event fires an attached event on the page before my drag and drop mouse up event. I don't know how to get it to fire appropriate so I'm seeking alternative methods.

Answer 1

You could try using jquery UIs http://jqueryui.com/draggable/ and http://jqueryui.com/droppable/ to achieve what you want, the combination of both allows you to make a lot and its easy as the documentation has some examples to get started and you can find lots of examples like this one: http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

to make it work on mobile devices (touch events) compatible use this script. makes jquery ui mobile compatible: touchpunch.furf.com

I made a jsfiddle that shows an example of how you could use jquery ui droppable and draggable:

http://jsfiddle.net/mMDLw/2/

// jquery closure
(function($, window, undefined) {

    // on dom ready
    $(function() {

        initializeDropzone();

        initializeDraggables();

    });

    /**
     * 
     * intializing the dropzone element
     *
     */
    var initializeDropzone = function() {

        // initialize the dropzone to make the dropzone a droppable element
        // http://jqueryui.com/droppable/
        $('#dropzone').droppable({
            accept: '.foo', // only elements with this class will get accepted by the dropzone
            hoverClass: 'drop_hover', // css class that should get applied to the dropzone if mouse hovers over element
            greedy: true,
            drop: function onDrop(event, ui) {

                console.log('#dropzone drop');

                var droppedElement = ui.draggable;

                console.log(droppedElement);

                // create an object and fill it with data we extract from element that got dropped
                var droppedElementData = {};

                droppedElementData.id = parseInt(droppedElement.attr('data-foo-id'));
                droppedElementData.name = droppedElement.text();

                var dropLogElement = $('#dropLog').find('ul');

                droppedElementData.position = dropLogElement.children().length + 1;

                // create the list html to add a row about the dropped element to our log
                var rowHtml = '';
                rowHtml += '<li id="' + droppedElementData.position + '_' + droppedElementData.id + '">';
                rowHtml += '<span class="position">' + droppedElementData.position + ') </span>';
                rowHtml += '<span class="name">' + droppedElementData.name + '</span>';
                rowHtml += '</li>';

                var row = $(rowHtml);

                // append the new row to the log
                dropLogElement.append(row);

            }

        });

    };

    /**
     * 
     * intializing draggable elements
     * 
     */
    var initializeDraggables = function() {

        // http://jqueryui.com/draggable/

        // make all elements that have the class "foo" draggable
        $('#droppables').find('.foo').draggable({
            refreshPositions: true, // refresh position on mouse move, disable if performance is bad
            revert: function(event) {

                console.log('a "foo" got dropped on dropzone');

                // if element is dropped on a dropzone then event will contain
                // an object, else it will be false
                if (event) {

                    // the event exists, this means the draggable element got dropped inside of the dropzone
                    console.log('YEP the event is not false');

                    // the element that is being dropped
                    var draggedElement = $(this);

                    // add explosion effect to dragged element
                    draggedElement.effect(
                            'explode',
                            1000,
                            function() {

                                console.log('drop scale effect finished');

                                console.log(draggedElement);

                                // put the element back to its original position
                                draggedElement.css('left', '0');
                                draggedElement.css('top', '0');

                                // make the element visible again by fading it in
                                draggedElement.show('fade', {}, 1000);

                            }
                    );

                    return false;

                } else {

                    // false because draggable element got dropped outside of the dropzone
                    console.log('NOPE no object, the event is false');

                    return true;

                }

            },
            start: function(event, ui) {

                // the user started dragging an element
                console.log('#droppables .foo drag start');

            },
            stop: function(event, ui) {

                // the user has released the draggable element
                console.log('#droppables .foo drag stop');

            }
        });

        // make all elements that have the class "bar" draggable (but the dropzone wont accept them)
        $('#nonDroppables').find('.bar').draggable(
            {
                revert: true, // if the element did not get dropped in the dropzone or not accepted by it, then  revert its position back to its original coordinates
                start: function(event, ui) {

                    // the user started dragging an element
                    console.log('#nonDroppables .bar drag start');

                },
                stop: function(event, ui) {

                    // the user has released the draggable element
                    console.log('#nonDroppables .bar drag stop');

                }
            }
        );

    };

})(jQuery, window);