jQuery Droppable无法更新

G'day Stackoverflow

For a website I'm working on, drag and drop functionality must be used once an AJAX request has been returned and valid data is found. If this is the case:

            var allowDrop = ($json[0][0]);
            if(allowDrop === "true") {
                $editorCont.addClass("allow-drop");
            }
            else {
                $editorCont.removeClass("allow-drop");
            }

... which works perfectly fine.

However,

var $editorDropCont = $("body > div#page > div#editor.allow-drop");


        $editorDropCont.droppable({
            accept: "a.drag-button.clone-drop",
            drop: function(event,ui) {
                $clone = $(ui.helper).clone();
                $editorDropCont.append($clone);

only works if the page is loaded in that state with class allow-drop whereas if the AJAX request is passed again, items will still be droppable even if the div does not contain that class anymore.

The droppable event is also called for after the AJAX request in hope that it would've updated the droppable state, however it does not seem to be working.

Is there any way to make the div droppable once the AJAX request has been called for?

Thanks

It happens because $editorDropCont is a set of elements (or one element) you selected with $("body > div#page > div#editor.allow-drop"). When you add or remove classes to this set of elements they are still droppable. You have to reinitialize droppable each time AJAX request is made.

$editorDropCont.droppable("destroy").droppable({...});

OR:

var allowDrop = ($json[0][0]);

if (allowDrop === "true") {
    $editorDropCont.droppable("destroy").droppable({...});
} else {
    $editorDropCont.droppable("destroy");
}