Yenile Yardımcı Pozisyon

Question

Birden fazla konteynere sıralamak için jquery sortable kullanıyorum.

ben yardımcı seçenek bir eleman sürükleyerek başladığında, jQuery kopyasını oluşturan ve vücuda ekler.Belirli ve bu hale ne olduğunu burada gider Yani öylesine

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

gibi 'klon' olarak ayarlanmış olması aslında sürüklenen (yardımcı), orijinal değil.

Sürükleme başladığında yardımcım pozisyon değiştirebilir. Bununla birlikte jQuery, yardımcının bir konteynerin içine düştüğü zaman yardımını değiştirmiş olsa da, yardımcının pozisyonu değiştirdiğini düşünür.

Soru: JQuery'yi değiştirdikten sonra yardımcıların konumunu nasıl yeniden hesaplayabilirim?

$("#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); 
    } 
}); 

Örnek: http://codepen.io/anon/pen/qZaNJZ Sen tutucu vurgulamak bu sorunu tamamen ortadan gezinip olmadığında bile, bir sonraki kap gidecek görebilirsiniz. Çünkü blok pozisyonu jQuery ayarlanmış değil.

Answer 1

Sorgu için tolerance'u değiştirerek, hangi kapsayıcı/hedefin taşınacağını algılamak için imlecin yerine yardımcı bloğu yerine kullanabilirsiniz.

Ben forked your Codepen varsa, ya da altına yeniden:?

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>