jQuery यूआई सॉर्ट करने योग्य - निर्धारित करें कि कौन सा तत्व ड्रैग किए गए तत्व के नीचे है

Question

मैंने एक साधारण अनॉर्डर्ड सूची पर jQuery UI के सॉर्ट करने योग्य प्लग-इन को कार्यान्वित किया है। क्या यह निर्धारित करने का कोई तरीका है कि कौन सा तत्व ड्रैग किए जा रहे तत्व के नीचे है?

इस स्क्रीनशॉट में Row 3, column 1Row 2-3, column 1 से अधिक हो रहा है। इस मामले में; मुझे Row 2-3, column 1 पकड़ने की आवश्यकता होगी।

http://roosteronacid.com/sortable.jpg

Answer 1

मैं mousemove घटना को सुन एक sortable खींचते समय से एक समाधान कर दिया। Mousemove पर, यह sortables में सभी तत्वों की जांच करता है और वर्तमान में ड्रैग किए गए तत्व को इसके ऊपर घुमाता है या नहीं (शून्य सहनशीलता के साथ इसके साथ छेड़छाड़ करता है - यदि यह तत्व को एक पिक्सेल द्वारा कवर करता है, तो यह छेड़छाड़ करता है)। कोड बहुत विस्तृत है ताकि आप देख सकें कि क्या किया जा रहा है। http://jsfiddle.net/Vwd3r/2/

var sortables = $("li"); 
var draggedItem; 

$("#sort").sortable({ 
    start: function(event, ui) { 
     draggedItem = ui.item; 
     $(window).mousemove(moved); 
    }, 
    stop: function(event, ui) { 
     $(window).unbind("mousemove", moved); 
    } 
}); 

function moved(e) { 

    //Dragged item's position++ 
    var d = { 
     top: draggedItem.position().top, 
     bottom: draggedItem.position().top + draggedItem.height(), 
     left: draggedItem.position().left, 
     right: draggedItem.position().left + draggedItem.width() 
    }; 

    //Find sortable elements (li's) covered by draggedItem 
    var hoveredOver = sortables.not(draggedItem).filter(function() { 
     var t = $(this); 
     var pos = t.position(); 

     //This li's position++ 
     var p = { 
      top: pos.top, 
      bottom: pos.top + t.height(), 
      left: pos.left, 
      right: pos.left + t.width() 
     }; 

     //itc = intersect 
     var itcTop  = p.top <= d.bottom; 
     var itcBtm  = d.top <= p.bottom; 
     var itcLeft  = p.left <= d.right; 
     var itcRight = d.left <= p.right; 

     return itcTop && itcBtm && itcLeft && itcRight; 
    }); 
}; 

: sortable तत्वों इसकी चौड़ाई, सीमा आदि है, चौराहे-गणना width() और height() के बाद से थोड़ा दूर, हो सकता है इस मामले

यहाँ में सही मान नहीं लौटते एक डेमो है

ध्यान दें कि sortables क्रमबद्ध वस्तुओं तक सीमित नहीं है, यह पृष्ठ पर कोई भी तत्व हो सकता है।

Answer 2

यदि आप जो खोज रहे हैं वह ड्रैगगेबल (या उसके बच्चों/माता-पिता) पर हो रहा है, तो मुझे लगता है कि एक घटना हैंडलर के अंदर, this वह तत्व है जो यह हो रहा है। तो आप काम करने के लिए एक स्पिफी jQuery सॉर्ट करने योग्य ऑब्जेक्ट प्राप्त करने के लिए $(this) लिख सकते हैं। माउस ईवेंट हैंडलर के बहुत सारे खाना पकाने से कहीं ज्यादा आसान!