ताज़ा हेल्पर स्थिति

Question

मैं एकाधिक कंटेनर में तत्वों को सॉर्ट करने के लिए jquery sortable का उपयोग कर रहा हूं।

मैं सहायक विकल्प तो

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