javascript - 实现拖放

Question

我正在尝试实现一个简单的拖放，如果有其他实现它的方法不需要鼠标按下、鼠标移动和鼠标向上事件，我正在徘徊。原因是我的鼠标向上事件在我的拖放鼠标向上事件之前触发了页面上的附加事件。我不知道如何让它适当地开火，所以我正在寻找替代方法。

Answer 1

你可以尝试使用 jquery UIs 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

我制作了一个 jsfiddle，展示了如何使用 jquery ui 可拖放和可拖动的示例：

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