javascript - Jquery 导致错误并且 css 粘住

Question

我正在使用此代码 (jsfiddle) - JSFIDDLE

当一个项目被拖动到正确的框时，它会禁止再次拖动原始项目。问题是它会导致 css 粘住，从而导致接受拖动项目的绿色框不会消失。

它还会在控制台中产生此错误:

未捕获错误:在初始化之前无法调用可拖动对象上的方法；尝试调用方法“disable”。

任何帮助都会很好。

另外我如何将禁用框的颜色更改为灰色。

JS:

    $(".DragItem").draggable({
    revert: 'invalid',
    helper: "clone"
});

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());

    }
});

$(".drop2").droppable({
    accept: '#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop3").droppable({
    accept: '#3,#4',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop4").droppable({
    accept: '.DragItem',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());
    }
});

Answer 1

JSFiddle

您可以使用 $(ev.target).draggable(); 初始化可拖动对象