jQuery-UI Draggable Containment Acting Strange

Question

<ul>を反復してすべての子をドラッグ可能にすると問題になります。私は<li>のすべてが<ul>の範囲内にあるように封じ込め作業を行いたいと思います。私は論理的にこれをしました：

currentHexList.children().draggable({ //currentHexList is a jQuery object in a for loop that has the value of a <ul> list 
    scroll: false, 
    containment: 'parent' 
}); 

すべては '封じ込められた'作品のように 'まあまあですが、望ましくはありません。ここに私が何をしようとしているのか、起こっていることがあります。赤は実際にマークを付けて、強調表示されたが、境界があるべきで親である：

サイドノート、私は以上でIループhereからCSSファイル「六角形の応答グリッド」を使用していますそれらをドラッグ可能にするためのリスト。私は封じ込めにパディングがあったのか、それともCSSがそれに影響を与えているのか疑問に思っていました。ここで

が私のCSSと '六角形の応答グリッド' からリストへの適用CSSです：

、六角CSSから

#hexGrid { 
    overflow: hidden; 
    width: 100%; 
    margin: 0 auto; 
    padding:0.866% 0; 
    font-family: 'Raleway', sans-serif; 
    font-size: 15px; 
} 
#hexGrid:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

私のCSSから、

.hexGrid { 
    position: absolute; 
    top: 10%; 
    left: 20%; 
    padding: 0px; 
    width: 900px; 
    height: 800px; 
} 

Iおそらく私の上および/または左がそれに影響を与えているか、またはブロックを表示している疑いがありました。それをすべてまとめてみると、私のドラッグ可能な容器と本当の封じ込めの間には、私の望む封じ込めとの間に大きな相殺があります。与えられたオプションに基づいて座標を定義し、その要素をが封じ込めよりも大きいままの場合ドラッグに検証することによって動作

Answer 1

封じ込めはを去り、場合+ 幅が閉じ込め右より低いを残しました。上部と下部で同じこと。

要素の一部が表示されず、変換のためにこの奇妙な結果が得られます。あなたが見る左側は実際には要素の左側ではありません。あなたは何ができるか

は開始イベントで計算封じ込めをオーバーライドしています。これは、たとえば次のように動作します：

$('li').draggable({ 
    containment: 'parent', 
    start: function(e, ui) { 
    // access containment on the instance, which is the 
    // coordinates array calculated based on the element 
    // given in containment option. These coordinates 
    // are defined on start. The array has this structure: 
    // [x1 (left limit), y1 (top limit), x2 (right limit), y2 (bottom limit)] 
    var contCoord = $(this).draggable('instance').containment; 

    // Adjust the containment array based on the width of the element. 
    // This is good for left and right, you'll need 
    // to do this for top and bottom. 
    contCoord[0] -= ui.helper.width()/2; 
    contCoord[2] -= ui.helper.width()/2; 
    } 
});