在可丢弃的::javascript上显示隐藏按钮

Show hidden button on droppable :: javascript

本文关键字：显示 隐藏 按钮 javascript      更新时间：2023-09-26

即使我的可拖动框中只有一个图标被放入可丢弃区域，我也希望出现一个隐藏按钮。

我不确定我是否可以引用我用来隐藏它的css类，或者让JavaScript生成按钮。

模式框的onClick事件稍后将需要此按钮

如有任何帮助，我们将不胜感激。：）

jsfiddle看http://jsfiddle.net/JeLZr/4/

下面的代码就是我遇到的问题。

if ($(this).find('.draggable').length === 0) {
    $(this).append($(ui.draggable));
    if($(ui.draggable).find('button.generateReport').length === 0){
        $(ui.draggable).append('<input type="button" id="generateReport" class="BtnReport"  />');
    }
}

[编辑]我意识到这是一个很大的问题，但有人能帮忙吗；以及拖动图标，如果双击它，它将移动到可丢弃的框中？？这在可拖动/可丢弃的情况下可能吗？？

尝试回答第一个问题：

 $("#drop").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            $('.BtnReport').show();
            console.log("drop");
            $(this).addClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);

        },
        over: function (event, elem) {
            $(this).addClass("over");
            console.log("over");
        },
        out: function (event, elem) {
            $(this).removeClass("over");
        }
    });
    $("#drop").sortable();
    $("#grid").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            if($('#drop img').length == 1)
                $('.BtnReport').hide();                
            console.log("drop");
            $(this).removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);

http://jsfiddle.net/trevordowdle/JeLZr/5/

我也可以研究第二个问题，但最好为它创建另一个问题。

相关文章：