javascript - ドラッグ アンド ドロップの実装

Question

私は単純なドラッグ アンド ドロップを実装しようとしていますが、マウス ダウン、マウス移動、およびマウス アップ イベントを必要としない他の実装方法があるかどうかをさまよっていました。その理由は、ドラッグ アンド ドロップ マウス アップ イベントの前に、マウス アップ イベントがページ上で添付イベントを発生させるためです。適切に起動する方法がわからないので、別の方法を探しています。

Answer 1

jquery UI http://jqueryui.com/draggable/およびhttp://jqueryui.com/droppable/を使用して、目的を達成することができます。両方を組み合わせることで、ドキュメントにあるように多くのことを簡単に行うことができます開始するためのいくつかの例と、次のような多くの例を見つけることができます: http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

モバイル デバイス (タッチ イベント) で動作させるには、このスクリプトを使用します。jquery ui をモバイル互換にします: touchpunch.furf.com

jquery ui のドロップ可能およびドラッグ可能の使用例を示す jsfiddle を作成しました。

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);