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

Question

我制作了一个快速列表，其中每个项目都可以移至垃圾桶。我将其设置为一旦您将其追踪到垃圾箱，它就会隐藏起来。如果您点击“确认”按钮，则使用remove()将其完全删除。

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

这是 JSFiddle:http://jsfiddle.net/Gdze8/6/

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

实现此目的的一种方法是简单地将可拖动设置为始终恢复，然后允许可放置函数处理是否应将其删除。这是你的 fiddle 中的 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();
            }
        }
    });
});

这是您更新的 fiddle :http://jsfiddle.net/Gdze8/11/

编辑:不确定bottomInfo()是什么，但你绝对可以直接在ui.draggable.remove()下面调用它；如果需要的话。