Question

我制作了一个快速列表，其中每个项目都可以移动到垃圾桶。我把它设置好，一旦你将它追踪到垃圾桶上，它就会隐藏起来。如果你点击确认“确认”，那么用remove（）完全删除它。

问题是，如果我点击取消确认，它会保持隐藏状态（但我希望它再次显示，因为它会回到原来的位置，就像隐藏一样）。我尝试在很多地方使用ui.draggable.show（），但没有运气。有什么建议吗？

的Javascript / jQuery的：

$( init )

function init() {
$(".contentItem").draggable({
    revert: function (event, ui) {
        if ($(event[0]).closest('.list4').length ) {
        var state = !confirm("Are you sure you want to delete?")
        if (!state) {

         $(this).remove();
         bottomInfo();
     } else {
        return state;
    }
    } else {
        return true;
    }
    }
});
$(".list4").droppable( {
    accept: ".contentItem",

    drop: function(event, ui) {
    ui.draggable.hide();


    return true;
    }
});
}

Answer 1

您可以实现此目的的一种方法是简单地将draggable设置为始终还原，然后允许droppable函数处理是否应该删除它。这是你的小提琴中的JS，因为我理解你的问题：

jQuery(function () {
    jQuery('.contentItem').draggable({
        revert: true
    });
    jQuery('.list4').droppable({
        accept: '.contentItem',
        drop: function (event, ui) {
            ui.draggable.hide();
            if (confirm('Are you sure you want to delete?')) {
                ui.draggable.remove();
            } else {
                ui.draggable.show();
            }
        }
    });
});

这是您更新的小提琴：http://jsfiddle.net/Gdze8/11/

编辑：不确定是什么bottomInfo（），但你可以直接在ui.draggable.remove（）下面直接调用它。如果需要的话。

Answer 2

尝试将所有确认功能放在droppable上的drop事件中：

$(".contentItem").draggable({
    revert: true
});
$(".list4").droppable( {
    accept: ".contentItem",
    drop: function(event, ui) {
        var state = !confirm("Are you sure you want to delete?")
        if (!state) {
            $(ui.draggable).remove();
            bottomInfo();
            } else {
                return state;
            }
        return true;
    }
});

http://jsfiddle.net/UGY2v/

Answer 3

编辑经过进一步调查，你根本不需要掉落功能。

<强> jsFiddle

$(init);

function init() {
    $(".contentItem").draggable({
        revert: function (event, ui) {
            if ($(event[0]).closest('.list4').length) {
                var state = !confirm("Are you sure you want to delete?");
                if (!state) {

                    $(this).remove();
                    bottomInfo();
                } else {
                    return state;
                }
            } else {
                return true;
            }
        }
    });
    $(".list4").droppable({
        accept: ".contentItem"
    });
}

ui.draggable显示是否取消确认。

3 个答案: