在droppable :: javascript上显示隐藏按钮

时间:2013-12-11 19:37:47

标签: javascript jquery html css

即使我的可拖动框中只有一个图标掉入可叠加区域,我想要一个隐藏按钮出现。 我不确定我是否可以引用我用来隐藏它的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"  />');
    }
}

[编辑]我意识到这有很多要问,但有没有人可以提供帮助;以及拖动图标,如果双击,它将移动到droppable框?这有可能与draggable / droppable ??

1 个答案:

答案 0 :(得分:2)

尝试回答第一个问题:

 $("#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/

我也可以查看第二个问题,但最好为它创建另一个问题。