Обновить позицию помощника

Question

Я использую сортировку jquery для сортировки элементов в нескольких контейнерах.

У меня есть вариант помощник установлен в «клон», как так

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

Так что здесь происходит, что, когда элемент начинает перетаскивать, JQuery создает дубликат и присоединяет его к телу, и это становится элемент, который фактически перетаскивается (помощник), а не оригинал.

Помощник может изменить положение при перетаскивании. Тем не менее, 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>