CSS3 स्केल लागू होने पर सॉर्टेबल गलत व्यवहार करता है

Question

मैं सीएसएस ट्रांसफॉर्म के साथ एक JQuery सॉर्ट करने योग्य तत्व स्केल कर रहा हूं। सॉर्ट करने योग्य आइटम दोनों स्थिति और ऑफ़सेट शुरू करते हैं जबकि ड्रैगिंग गलत बीक्यूज हैं JQuery सीएसएस स्केल को ध्यान में नहीं लेता है। मैं इसे आंशिक रूप से हल किया कोड के साथ पाई गई:

jQuery Drag/Resize with CSS Transform Scale

लेकिन बात मैं का समाधान नहीं कर खींचें शुरू होता है पर sortable आइटम की स्थिति है। यह ऊपर कूदता है और थोड़ा सा। मैं समझ नहीं क्या शुरू ईवेंट हैंडलर में लाना:

 start: function(e, ui) 
     { 
      // something is needed here to fix the initial offset 
     } 

यह फिडल समस्या दिखाता है: http://jsfiddle.net/adrianrosca/zbvLp/4/

Answer 1

एक साथ अंतर खींचने योग्य कि बदलने पर नहीं है तत्व खुद, लेकिन माता-पिता पर। तो यह थोड़ा तर्क बदलता है।

यहां इस विशिष्ट मामले का समाधान है, लेकिन आप देखेंगे कि स्थिति के आधार पर यह बदल सकता है। उदाहरण के लिए, यदि आप ट्रांसफॉर्म-मूल बदलते हैं, या यदि आपके पास क्षैतिज क्रमबद्ध है, तो इसे अनुकूलित करना होगा। लेकिन तर्क ही रहता है:

var zoomScale = 0.5; 

$(".container") 
    .sortable({ 

    sort: function(e, ui) { 
    console.log(ui.position.left) 
     var changeLeft = ui.position.left - ui.originalPosition.left; 
     // For left position, the problem here is not only the scaling, 
     // but the transform origin. Since the position is dynamic 
     // the left coordinate you get from ui.position is not the one 
     // used by transform origin. You need to adjust so that 
     // it stays "0", this way the transform will replace it properly 
     var newLeft = ui.originalPosition.left + changeLeft/zoomScale - ui.item.parent().offset().left; 

     // For top, it's simpler. Since origin is top, 
     // no need to adjust the offset. Simply undo the correction 
     // on the position that transform is doing so that 
     // it stays with the mouse position 
     var newTop = ui.position.top/zoomScale; 

     ui.helper.css({ 
     left: newLeft, 
     top: newTop 
     }); 
    } 
    }); 

http://jsfiddle.net/aL4ntzsh/5/

संपादित करें:

पिछला जवाब स्थिति के लिए काम करेंगे, लेकिन के रूप में सभ्य प्रेमी द्वारा बताया, वहाँ चौराहे समारोह है कि जब सत्यापित करता है के साथ एक दोष है एक सॉर्टिंग होना चाहिए। असल में, पदों की सही गणना की जाती है, लेकिन आइटम चौड़ाई और ऊंचाई मान जो परिवर्तित नहीं होते हैं, जो समस्या पैदा कर रहे हैं। आप खाते में स्केल फैक्टर लेने के लिए प्रारंभिक ईवेंट पर उन्हें संशोधित करके इन मानों को समायोजित कर सकते हैं। उदाहरण के लिए इस तरह:

start: function(e, ui) { 
     var items = $(this).data()['ui-sortable'].items; 
     items.forEach(function(item) { 
     item.height *= zoomScale; 
     item.width *= zoomScale; 
     }); 
    } 

http://jsfiddle.net/rgxnup4v/2/

Answer 2

वहाँ तुम्हारी समस्या में दो बातें कर रहे हैं: एक तत्व की

1. स्थिति संपत्ति माता पिता निकटतम के आधार पर गणना की जाती है जो स्थिति पूर्ण या संबंधित है। अभी आधारित माता-पिता शरीर है जो अच्छा नहीं है इसलिए आपको कंटेनर के लिए position:relative; जोड़ना होगा।
2. क्योंकि, जैसा कि आप पहले ही नोटिस करते हैं, JQuery ui.position और ui.originalPosition दोनों की गणना करते समय सीएसएस स्केल को ध्यान में नहीं लेता है, इसलिए आपको दोनों को zoomScale "लागू" करना होगा।

सीएसएस

.container 
{ 
    position: relative; 
    transform: scale(0.5); 
    transform-origin: center top; 
} 

स्क्रिप्ट

var changeLeft = ui.position.left - ui.originalPosition.left; 
var newLeft = (ui.originalPosition.left + changeLeft)/zoomScale; 
var changeTop = ui.position.top - ui.originalPosition.top; 
var newTop = (ui.originalPosition.top + changeTop)/zoomScale; 

यह वह जगह है अद्यतन कोड: http://jsfiddle.net/zbvLp/9/