Làm mới vị trí trợ giúp

Question

Tôi đang sử dụng jquery có thể sắp xếp để sắp xếp các phần tử trên nhiều vùng chứa.

Tôi có tùy chọn helper thiết lập để 'bản sao' như vậy

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

Vì vậy, những gì diễn ra ở đây là khi một yếu tố bắt đầu kéo, jQuery tạo ra một bản sao và gắn nó vào cơ thể, và điều đó trở thành yếu tố đó thực sự đang được kéo (helper), không phải là bản gốc.

Trình trợ giúp của tôi có thể thay đổi vị trí khi kéo bắt đầu. Tuy nhiên, jQuery nghĩ rằng helper là nơi nó đặt nó, mặc dù tôi đã thay đổi vị trí của nó bằng cách sử dụng lề, khi thả phần tử bên trong một container mà helper không thực sự trên nó (vì tôi đã thay đổi vị trí helper).

Câu hỏi: Làm cách nào để tôi có thể tính toán lại vị trí của trình trợ giúp sau khi tôi thay đổi nó?

Ví dụ: http://codepen.io/anon/pen/qZaNJZ Bạn có thể thấy rằng phần đánh dấu chỗ dành sẵn sẽ chuyển đến vùng chứa tiếp theo, ngay cả khi nó không hoàn toàn lơ lửng nó. Bởi vì vị trí khối không phải là những gì jquery thiết lập.

Answer 1

Bạn có thể thay đổi tolerance để có thể sắp xếp để nó sử dụng vị trí của con trỏ, chứ không phải khối trợ giúp để phát hiện vùng chứa/đích cần di chuyển đến.

Tôi có forked your Codepen, hoặc tái tạo nó bên dưới:

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>