jquery ui droppable - 被拒绝的draggables上的事件

时间:2016-08-18 14:15:58

标签: javascript jquery jquery-ui drag-and-drop

我使用jquery ui拖放小部件用于我的应用程序,我在这里面临一些困难。

在我的droppable元素上,只要使用drop选项在droppable元素上删除了draggable,就会触发成功消息。

现在,每当可拖动元素被可拖放元素拒绝时,我想发出错误消息。我将代码插入accept选项(在这种情况下是一个函数),但问题是每次我去 over 一个droppable元素时都会运行accept函数,并且我希望只有当我删除可拖动元素并且它被拒绝时才会触发该消息。

$slots.droppable({
    accept: function(draggable) {
        var valid = true;

        if (!draggable.hasClass('draggable')) {
            valid = false;
        }

        var _date = $(this).data('date');
        var $thisDateSlots = $('.sort-panel-body-day-body-slot[data-date="' + _date + '"]');

        $.each($thisDateSlots, function() {
            if ($(this).data('item') == draggable.data('id')) {
                console.log($(this).data('item'), draggable.data('id'));
                valid = false;
            }
        });

        return valid;
    },
    drop: function(event, ui) {
        var dropped = ui.draggable;

        dropped.data('slot', $(this).data('slot'));
        dropped.data('date', $(this).data('date'));

        stickToSlot(dropped, $(this).data('date'), $(this).data('slot'));

        $(this).data('item', dropped.data('id'));
        $(this).addClass('filled');
        $(this).droppable('disable');
        toastr.success('added successfuly');
        initSlots();
    },
    out: function(event, ui) {
        $(this).data('item', '');
        $(this).removeClass('filled');
        $(this).droppable('enable');
    }
});

任何解决方案吗?

0 个答案:

没有答案