使用ajax拖放后拖动的项目消失答案

【问题标题】：Dragged item disappears after drop with ajax使用ajax拖放后拖动的项目消失
【发布时间】：2011-05-20 07:52:29
【问题描述】：

我真的对 jQuery 拖放有问题。所以让我稍微解释一下情况。

我想要实现的是：当您在时间轴上拖动其中一个泪珠时，div 中的 id 和它所拖放的项目中的 id 应该在拖放后立即存储在我的数据库中。

我设法用 ajax 做到了，这是代码：

$('#dropzone ul li').droppable({
  drop: function(event, ui) {
        var day = $(".confirmday").val();
        var $drag = $(ui.draggable),
        var $drop = $(this);

        var drag = $drag.attr('id');
        var drop = $drop.attr('id');

        console.log(drag);

        if(drag == 'drag1')
        {
            drag = 'Medicijnen';
            werkwoord = ' ingenomen om ';
        }
        else if(drag == 'drag2')
        {
            drag = 'Snack';
            werkwoord = ' gegeten om ';
        }
        else if(drag == 'drag3')
        {
            drag = 'Frisdrank';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag4')
        {
            drag = 'Thee';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag5')
        {
            drag = 'Koffie';
            werkwoord = ' gedronken om ';
        }
        else if(drag == 'drag6')
        {
            drag = 'Alcohol';
            werkwoord = ' gedronken om ';
        }

        $.post("ajax/save.php", { 
                drag: drag,
                drop: drop,
                userid: <?php echo $_SESSION['id']; ?>,
                day: day},
                function(data) 
                {
                });
        return false;
    },
});

但是当我这样做时，拖动的项目（或该项目的克隆）就会消失。我不知道为什么，因为页面没有刷新。新项目只是不会存储。

我尝试的另一个选项是将拖动的项目的 ID 和放置的项目 ID 放在一个文本框中，并在每次放置某些东西时保存它。但这也行不通。

我真的希望有人可以帮助我！提前致谢。

【问题讨论】：

我会使用switch 语句而不是else ifs 链。
我相当肯定你不应该在 drop 事件执行后返回 false。最后和$(ui.draggable)..之后似乎还有逗留的逗号。
我也对return false 做出了反应。因为这会告诉 jQuery UI droppable 被丢弃的元素是无效的，然后丢弃它。这很可能是它消失的原因。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您将在 drop 回调处理程序的末尾返回 false。

这将告诉 droppable 可拖动对象无效，然后将其丢弃。如果您完全删除return，它应该可以工作。

我冒昧地优化了您的代码，希望您不要介意；）

$('#dropzone ul li').droppable({
    drop: function(event, ui) {
        var day = $(".confirmday").val(),
            drag, werkwoord;

        switch (ui.draggable[0].id) {
            case "drag1":
                drag = 'Medicijnen';
                werkwoord = ' ingenomen om ';
            break;

            case "drag2":
                drag = 'Snack';
                werkwoord = ' gegeten om ';
            break;

            case "drag3":
                drag = 'Frisdrank';
                werkwoord = ' gedronken om ';
            break;

            case "drag4":
                drag = 'Thee';
                werkwoord = ' gedronken om ';
            break;

            case "drag5":
                drag = 'Koffie';
                werkwoord = ' gedronken om ';
            break;

            case "drag6":
                drag = 'Alcohol';
                werkwoord = ' gedronken om ';
            break;

            default:
                return false;
            break;
        }

        $.post("ajax/save.php",
            { 
                drag: ui.draggable[0].id,
                drop: this.id,
                userid: <?php echo $_SESSION['id']; ?>,
                day: day
            },
            function(data){}
        );
    },
});

【讨论】：