ページ上にリリースされたときにjquery draggable jumps？

Question

私はなぜ、jquery ui draggableが捨てられた時に飛び跳ねるのか理解しようとしています！

基本的に右にジャンプし、ページ上のどこにいても解放されています！ここで

は、問題を説明するためのjsfiddleです：https://jsfiddle.net/2wwa3yaw/1/

私はdiv #droppableに相対position:relative;の位置を与えているが、私はこれを行う必要があり、そのためだと思います。

これを解決する方法はありますか？

何かアドバイスをいただければ幸いです。

Answer 1

私はもっとこのような何か意味：あなたはxを追加するとき、あなたはCSSを経由してtopとleftを設定することができ

https://jsfiddle.net/Twisty/szmrb146/

を。

HTML

<div align="center" style="width:100%; padding-top:10px;"> 
    <div id="dragme" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;"> 
    <P> Drag me </P> 
    </div> 
    <div align="center" id="droppable" style=" position:relative; width: 250px; height:550px; border: 2px dashed red;"> 
    <P> </P> 
    </div> 
</div> 

jQueryの

$("#dragme").draggable({ 
    helper: 'clone', 
    cursor: 'move', 
    tolerance: 'fit' 
}); 

var x = null; 
$("#droppable").droppable({ 
    drop: function(e, ui) { 
    var parent = $("#droppable"); 
    var x = ui.helper.clone(); 
    var leftAdj = (ui.position.left - parent.offset().left); 
    var topAdj = (ui.position.top - parent.offset().top); 
    x.css({ 
     left: leftAdj, 
     top: topAdj 
    }); 
    x.draggable({ 
     helper: 'original', 
     containment: '#droppable', 
     tolerance: 'fit' 
    }); 
    x.find('.ui-resizable-handle').remove(); 
    x.resizable(); 
    x.appendTo('#droppable'); 
    ui.helper.remove(); 
    } 
}); 

更新

マイナーなバグを発見、私たちは私たちが最初のオブジェクトをドロップするときに、これらを調整したいです。だから私は、クラスと条件を追加しました：

https://jsfiddle.net/Twisty/szmrb146/1/

は、クラスを追加します。

<div id="dragme" class="outside" style="width: 70px; height: 70px; border: 2px solid #CCC; position:absolute;"> 
    <P> Drag me </P> 
    </div> 

、条件：

if (x.hasClass("outside")) { 
     x.css({ 
     left: leftAdj, 
     top: topAdj 
     }); 
     x.removeClass("outside"); 
    }