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

实现此目的的一种方法是简单地将可拖动对象设置为始终还原，然后允许可放置函数处理是否应将其删除。这是你小提琴中的 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

编辑经过进一步调查，您根本不需要 drop 功能。

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"
    });
}