javascript - 无法在 mouseup 事件中删除元素

Question

这是我编写的用于一次拖动多个项目的 jQuery 代码。它现在可以拖动但不能放下。

这是代码

    $(document).on('click', function (e) {
        var target = e.target;
        if (!$(target).hasClass('a')) $('.selected').removeClass('selected');
    });
    $(document).delegate('.a', 'dblclick', function (e) {
        $(this).addClass('selected');
    });

    $(document).delegate('.selected', 'mousedown', function (e) {
        var div = $('<div></div>');
        $('.selected').each(function () {
            div.append($(this).clone());
        });
        div.prop('id', 'currentDrag');
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
        $('body').append(div);
    });

    $(document).on('mouseup', function (e) {
        var tgt = e.target;
        var mPos = {
            x: e.pageX,
            y: e.pageY
        };
        $('.drop').each(function () {
            var pos = $(this).offset(),
                twt = $(this).width(),
                tht = $(this).height();
        });
        if((mPos.x > pos.left) && (mPos.x < (pos.left + twt)) && (mPos.y > targPos.top) && (mPos.y < (pos.top + tht))) {
            $(this).append($('#currentDrag').html());
        }
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });
    $('.drop').on('mouseup', function (e) {
        $(tgt).append($('#currentDrag').html());
        $('.drop .selected').removeClass('selected');
        $('#currentDrag').remove();
    });

    $(document).on('mousemove', function (e) {
        $('#currentDrag').css({
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
    });

我的代码有什么问题，我该如何解决。这是 fiddle http://jsfiddle.net/mDewr/27/

Answer 1

我真的建议尝试找到一种方法让 jQuery UI draggable 和 droppable 库为您工作。那么问题就变成了， 类似于这个:How do I drag multiple elements with JavaScript or jQuery?。

以下是我们如何将该问题的答案之一应用于您的问题。我正在使用 jQuery UI multiple draggable plugin ，其完整脚本可在此处找到:jquery.ui.multidraggable-1.8.8.js。

首先让我们简化您的 HTML。通过将可拖放的 div 放入元素中，我们不必为每个元素应用冗余样式。相反，我们可以使用包含元素来设置样式

HTML

<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>

使用该插件，我们可以在每个拖动 div 上调用 multidraggable。并且 droppable 可以放在任何地方

JavaScript

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

自定义

我们可以通过样式来控制外观。例如，我们会将任何可以接收掉落物的东西设为黄色，将要掉落的任何东西设为红色，将任何接收到元素的东西设为绿色。

下面是 CSS 中的一些样式示例

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

我们将控制何时使用 JavaScript 应用这些类:

$("#dropTargets div").droppable({
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function () {
        $(this).addClass("ui-state-highlight")
    }
});

可多次拖动

您应该为当前选定的元素设置样式。该脚本会将 ui-multidraggable 类应用于所有当前选定的元素。以下 CSS 将使用户明白他们的选择已被选中。

.ui-multidraggable {
    background: tan;
}

查看此演示。只需按住 ctrl 即可选择多个 div，然后一次拖动所有这些。

jsFiddle