Question

我很善意面对这个奇怪的问题。丢弃事件不是第一次工作，第二次工作正常。

我的代码：

$( document).ready( init());

function init() {
    $blueClone = null;
    var inYellow = false;

    $('.dragme').draggable({
        helper: "clone",
        cursor: 'move',
//        revert: true    // causes the dropped blue to zip back to it's source - whether dropped into the yellow or not
    });

    $('#grey').droppable({   

        // for any blue that gets dropped in grey
        drop: function (event, ui) {
            if( ui.draggable.hasClass( 'canvas-element')) { 
                $blueClone = ui.draggable;
                $blueClone.remove();
            } else {
                $blueClone = ui.draggable.clone();    // create a new blue 
            }



            $('#yellow,#green').droppable( {    // for any blue that gets dropped in yellow        
                drop: function (event, ui) {
                    var $canvas = $(this);
                    if( !ui.draggable.hasClass('canvas-element')) {    // if the blue that has just been dropped was not already in yellow
                        $blueClone.addClass('canvas-element');
                        $blueClone.draggable({
//                            containment: '#yellow'    // ensures that once blue is in yellow, it remains contained in yellow
                        });
                        $canvas.append($blueClone);    // attach the new blue created above onto yellow
                        $blueClone.css({
                            left: (ui.position.left),
                            top: (ui.position.top),
                            position: 'absolute'
                        });
                    }    // if( !ui.draggable.hasClass('canvas-element'))
                }    // drop: function (event, ui)
            });    // $('#yellow').droppable(

        }    // drop
    });    // $( '#grey')





}

小提琴：http://jsfiddle.net/GRDww/155/

我一直坐在这个虫子身上一段时间。

Answer 1

使黄色和绿色框可放置的代码位于灰色框的drop处理程序内。所以最初只有灰色框是一个放置目标。

然后第一滴掉落到灰盒子的掉落处理器上，然后只有黄色和绿色的盒子变得可以掉落。

如果您将其移到drop函数之外，它将首次运行：

$('#grey').droppable( {
    drop: function (event, ui) {
      /*...*/
    }
}); // $('#grey')

$('#yellow,#green').droppable( {
    drop: function (event, ui) {
      /*...*/
    }
}); // $('#yellow,#green')

更新了小提琴：http://jsfiddle.net/GRDww/156/

jquery下载第一次不工作？

1 个答案: