停止投放并返回其位置

Question

当我有碰撞停止丢弃元素时，我想添加一个条件，并将其返回到最后一个位置。如果检测到div (f，elementsi)之间的冲突，则collisionDivDetect返回true。

这是我的代码：https://jsfiddle.net/tmedamine/60f30bwr/2/

function clonage(elem) {
    var fla = false;
    this.c = "#"+elem;
    $(c).draggable({revert: 'invalid',helper: 'clone',cursor: 'move',tolerance: 'fit'  });
    var rs ;
    $("#surface").droppable({
        drop: function(e, ui) {
            x = ui.helper.clone(false);
            x.draggable({
                tolerance: 'intersect',
                helper: 'original',
                containment: 'parent',
                tolerance: 'fit'
            });

            x.find('.ui-resizable-handle').remove();
            F = x[0].id;
            x.appendTo(".surface");
            ui.helper.remove();
            for(i in elements){
                if(elements[i]!=F && elements[i]!="surface" && elements[i]!="menu")
                {    
                    fla = collisionDivDetect(F,elements[i]);
                    if(fla == true){
                        console.log('collision');
                        /** Stop Drop and return to last position ***/
                    }
                }  
            }
        }
    });
}

https://jsfiddle.net/tmedamine/60f30bwr/2/

Answer 1

我找到了解决方案，但是遗漏了一些修改。有时它不能正常工作。

function clonage(elem) {
this.c = "#"+elem;
$(c).draggable({revert: 'invalid',helper: 'clone',cursor: 'move',tolerance: 'fit' });
$(".droppable").droppable({
    drop: function(e, ui) {
        x = ui.helper.clone(false);
        if(!inArray(elements,x[0].id)){
            if(!(ui.draggable[0].className).indexOf('tableRonde')){
                x[0].id = 'tableRonde'+nbtr; nbtr++; rs = nbtr-1;
                param= 'tableRonde'+rs;tname = ntr+rs;
                x.attr('name',tname);
                x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>');
                x[0].className = 'tableRonde1';
            }else if (!(ui.draggable[0].className).indexOf('table')){
                x[0].id = 'table'+nbt; nbt++;rs = nbt-1;
                param= 'table'+rs;tname = nt+rs;
                x.attr('name',tname);
                x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>');
                x[0].className = 'table1';
            }else if (!(ui.draggable[0].className).indexOf('zone')){

                x[0].id = 'zone'+nbz; nbz++;rs = nbz-1;
                param= 'zone'+rs;tname = nz+rs;
                x.attr('name',tname);
                x.html(tname +' <a href="#" onClick="openPopup('+param+')" >Editer</a>');
                x[0].className = 'zone1';

            }else if (!(ui.draggable[0].className).indexOf('plan')){
                x[0].id = 'plan'+nbp; nbp++;rs = nbp-1;
                param= 'plan'+rs;tname = np+rs;
                x.attr('name',tname);
                x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>');
                x[0].className = 'plan1';
            }
            elements.push(x[0].id);
        };
        x.draggable({
            tolerance: 'intersect',
            helper: 'original',
            containment: 'parent',
            tolerance: 'fit',
            revert: 'invalid'                
        });
        x.find('.ui-resizable-handle').remove();
        ui.helper.remove();
        x.resizable({
            minHeight: 60,
            minWidth: 50,
            containment: 'parent'
        });
        F = x[0].id;
        x.attr('width','0px');
        x.attr('heigth','0px');
        x.appendTo(".surface");
    },
    accept:function(){
        fla = true;
        for(i in elements){
            if(elements[i]!=F && elements[i]!="surface" && elements[i]!="menu" && elements[i].indexOf("zone") && F.indexOf("zone"))
            {    
                if(collisionDivDetect(F,elements[i])){
                    fla = false;
                }   
                if(collisionDivDetect(elements[i],F)){
                   fla = false;
                }
            }  
        } 
        return fla;
    }

})；}