リフレッシュヘルパーの位置

Question

jquery sortableを使用して、複数のコンテナにまたがって要素をソートしています。

私は、ヘルパーオプションは、要素がドラッグを開始したときに、jQueryの複製を作成し、身体に追加し、それがなっていることが何であるかをここに行くので、そう

$("#sup").sortable({ 
    helper: "clone" 
}); 

LIKE「クローン」に設定されています実際にドラッグされている要素（ヘルパー）であり、オリジナルではありません。

ドラッグが開始されると、ヘルパーの位置が変わることがあります。しかし、jQueryは、マージンを使用して位置を変更したにもかかわらず、ヘルパーが実際にそれ以上ではないコンテナ内に要素をドロップするとき（ヘルパーの位置を変更したため）、ヘルパーはそれを置く場所だと思っています。

質問：jQueryを変更した後、ヘルパーの位置を再計算させるにはどうすればよいですか？

$("#sup").sortable({ 
    helper: "clone", 
    start: function(event, ui) { 
     var marginsToSet = ui.item.data().sortableItem.margins; 

     // helper position changed 
     ui.helper.css('margin-left', marginsToSet.left); 
     ui.helper.css('margin-top', marginsToSet.top); 
    } 
}); 

例：http://codepen.io/anon/pen/qZaNJZあなたはプレースホルダのハイライトは、それは完全にそれをホバリングいない場合でも、次のコンテナに行くことがわかります。ブロックの位置はjqueryが設定したものではないためです。

Answer 1

ソート可能のためにtoleranceを変更すると、ヘルパーブロックではなくカーソルの位置を使用して、移動するコンテナ/ターゲットを検出できます。

私はforked your Codepenを持っている、または以下にそれを再作成：？

var sortableInitialised = false; 
 

 
$(function() { 
 
    var $div = $("div"); 
 

 
    var $input = $('input[type=checkbox]').on('change', function() { 
 
    var isChecked = $(this).prop('checked'); 
 
    makeSortable($div, isChecked ? 'pointer' : 'intersect'); 
 
    }); 
 

 
    makeSortable($div, 'intersect'); 
 
}); 
 

 
function makeSortable(elem, tolerance) { 
 
    if (sortableInitialised) { 
 
    // if changing, start from scratch 
 
    elem.sortable('destroy'); 
 
    } 
 
    elem.sortable({ 
 
    connectWith: "div", 
 
    appendTo: document.body, 
 
    placeholder: "placeholder", 
 
    helper: "clone", 
 
    tolerance: tolerance, 
 
    start: function(event, ui) { 
 
     var marginsToSet = ui.item.data().sortableItem.margins; 
 
     ui.helper.css('margin-left', marginsToSet.left); 
 
     ui.helper.css('margin-top', marginsToSet.top); 
 
    } 
 
    }); 
 
    sortableInitialised = true; 
 

 
    // update heading 
 
    $('h2').text("tolerance: '" + tolerance + "'" + (tolerance === 'intersect' ? ' (default)' : ' (proposed)')); 
 
}

h2, p { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
} 
 
div { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: #f7f7f7; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 
span { 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
    margin-top: 25px; 
 
    box-sizing: border-box; 
 
} 
 
.placeholder { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 

 
<h2>tolerance: 'intersect' (default)</h2> 
 
<div><span></span> 
 
</div> 
 
<div></div> 
 
<div></div> 
 

 
<p> 
 
    <label> 
 
    <input type="checkbox">Use pointer tolerance 
 
    </label> 
 
</p>