停止下降并返回其位置

时间:2015-11-25 09:53:24

标签: javascript jquery-ui-draggable jquery-ui-droppable

我想在碰撞停止掉元素时添加条件并将其返回到最后位置。 如果collisionDivDetect检测到div(f,elements [i])之间的冲突,则返回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/

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,但却错过了一些修改。有时它不能正常工作。

<form method="post" action="<?=$_SERVER['REQUEST_URI']?>">
.
.
.
//a lot of table,tr,td,input,etc. in this part
.
.
.

<td style="border-style:solid; border-width:2px 1px 1px 2px"><input type="radio" class="metalYayaKorkuluk_Deformasyon" name="metalYayaKorkuluk_Deformasyon" style="width:100%; margin:0px; display:table-caption" value="1" /></td>
<td style="border-style:solid; border-width:2px 1px 1px 1px"><input type="radio" class="metalYayaKorkuluk_Deformasyon" name="metalYayaKorkuluk_Deformasyon" style="width:100%; margin:0px; display:table-caption" value="2" /></td>
<td style="border-style:solid; border-width:2px 1px 1px 1px"><input type="radio" class="metalYayaKorkuluk_Deformasyon" name="metalYayaKorkuluk_Deformasyon" style="width:100%; margin:0px; display:table-caption" value="3" /></td>
<td style="border-style:solid; border-width:2px 2px 1px 1px"><input type="radio" class="metalYayaKorkuluk_Deformasyon" name="metalYayaKorkuluk_Deformasyon" style="width:100%; margin:0px; display:table-caption" value="4" /></td> 

<td style="border-style:solid; border-width:1px 1px 2px 2px"><input type="radio" class="plastikKaplama4" name="plastikKaplama4" style="width:100%; margin:0px; display:table-caption" value="1" <?php echo ($plastikKaplama4=='1')?'checked':'' ?>/></td>
<td style="border-style:solid; border-width:1px 1px 2px 1px"><input type="radio" class="plastikKaplama4" name="plastikKaplama4" style="width:100%; margin:0px; display:table-caption" value="2" <?php echo ($plastikKaplama4=='2')?'checked':'' ?>/></td>
<td style="border-style:solid; border-width:1px 1px 2px 1px"><input type="radio" class="plastikKaplama4" name="plastikKaplama4" style="width:100%; margin:0px; display:table-caption" value="3" <?php echo ($plastikKaplama4=='3')?'checked':'' ?>/></td>
<td style="border-style:solid; border-width:1px 2px 2px 1px"><input type="radio" class="plastikKaplama4" name="plastikKaplama4" style="width:100%; margin:0px; display:table-caption" value="4" <?php echo ($plastikKaplama4=='4')?'checked':'' ?>/></td>


<input id='elm2' type="submit" name="save2" value="Submit" />

</form>

}); }