Refresh Helper Position

Question

Sto usando jquery ordinabile per ordinare elementi su più contenitori.

ho opzione aiutante impostata su 'clone' in questo modo

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

Quindi quello che succede qui è che quando un elemento inizia il trascinamento, jQuery crea un duplicato e lo aggiunge al corpo, e che diventa il elemento che in realtà viene trascinato (l'helper), non l'originale.

Il mio assistente può cambiare posizione quando inizia il trascinamento. Tuttavia, jQuery pensa che l'helper sia dove lo ha messo, anche se ho cambiato la sua posizione usando il margine, quando l'elemento è stato rilasciato all'interno di un contenitore l'helper non è effettivamente sopra (dato che ho cambiato posizione helper).

Domanda: Come posso avere jQuery ricalcolare la posizione dell'helper dopo averlo modificato?

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

Esempio: http://codepen.io/anon/pen/qZaNJZ Si può vedere che l'evidenziazione segnaposto andrà al contenitore successivo, anche quando non è in bilico completamente. Perché la posizione del blocco non è quella impostata da jquery.

Answer 1

È possibile modificare tolerance per l'ordinabile in modo che utilizzi la posizione del cursore, anziché il blocco di supporto, per rilevare a quale contenitore/destinazione spostare.

devo forked your Codepen, o ricreato qui sotto:?

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>