jQuery खींचने योग्य और -webkit-transform: पैमाने();

Question

मेरे पास ऐसी स्थिति है जहां div के अंदर खींचने योग्य आइटम हैं। हालांकि, जब -webkit-transform का उपयोग करके स्केल किया गया है, तो ड्रैगगेबल स्पष्ट रूप से ठीक से काम करना बंद कर देता है।

मैं परिदृश्य here reproduced गए हैं।

आप देख सकते हैं, खींचने योग्य आइटम दस्तावेज़ के सापेक्ष ले जाता है, भले ही माता-पिता एक बिल्कुल अलग पैमाने में है।

मैं पैमाने (उदाहरण में 1.5) जे एस में एक चर के रूप में है, इसलिए मुझे लगता है कि उपयोग कर सकते हैं, लेकिन जहां? मुझे ड्रैगिंग दूरी को स्केल से विभाजित करने की ज़रूरत होगी, है ना? मैं यह कहां कर सकता हूं?

संपादित करें: मैं drag -event करने के लिए एक समारोह की स्थापना की कोशिश की है, लेकिन नहीं यह पता लगाने के लिए कैसे वास्तव में खींचने दूरी को बदलने के लिए सक्षम है।

EDIT2: मैं jQuery यूआई स्रोत खोदा; और ऐसा लगता घटना drag से ऐसा करने के लिए कोई रास्ता नहीं है कि वहाँ:

if(this._trigger('drag', event, ui) === false) { 
    this._mouseUp({}); 
    return false; 
} 

आप देख सकते हैं, कॉलबैक-समारोह की वापसी मान किसी भी तरह से संग्रहीत नहीं है। के बाद तत्व की स्थिति बदल दी गई है, कॉलबैक निकाल दिया गया है, इसलिए कॉलबैक के अंदर सीएसएस को बदलना काम नहीं करता है।

आप प्रासंगिक कोड here देख सकते हैं इस स्ट्रिंग के साथ ब्राउज़र-खोज का उपयोग करके:

_mouseDrag: function(event, noPropagation) { 

Answer 1

जावास्क्रिप्ट के साथ मेरी छोटी मात्रा में अनुभव के कारण मुझे एहसास नहीं हुआ कि कॉलबैक वास्तव में स्थिति को संशोधित कर सकता है, भले ही यह return कुछ भी न हो। ऐसा इसलिए है क्योंकि जेएस में स्पष्ट रूप से पैरामीटर संदर्भ द्वारा पारित डिफ़ॉल्ट रूप से होते हैं।

// Couldn't figure out a way to use the coordinates 
// that jQuery also stores, so let's record our own. 
var click = { 
    x: 0, 
    y: 0 
}; 

$('.draggable').draggable({ 

    start: function(event) { 
     click.x = event.clientX; 
     click.y = event.clientY; 
    }, 

    drag: function(event, ui) { 

     // This is the parameter for scale() 
     var zoom = 1.5; 

     var original = ui.originalPosition; 

     // jQuery will simply use the same object we alter here 
     ui.position = { 
      left: (event.clientX - click.x + original.left)/zoom, 
      top: (event.clientY - click.y + original.top)/zoom 
     }; 

    } 

}); 

Answer 2

मैं तुम्हें Transformable की जरूरत है (http://plugins.jquery.com/project/transformable) jQuery वेबकिट स्केलिंग को 'सामान्यीकृत' करने के लिए प्लगइन। फिर ड्रैगिंग फ़ायरफ़ॉक्स में काम करेगा।

यहाँ प्लगइन है - http://flin.org/js/jquery.transformable.js। मुझे लगता है कि यह आपकी समस्या का समाधान करना चाहिए। http://jsfiddle.net/vMaXm/4/

$("#parent").setTransform("scalex", 1.5); 
//$("#parent").setTransform("scaley", 1.5); 
$('.draggable').draggable({ containment: "parent" }); 

हालांकि, इस पल में, अगर मैं मध्य लाइन uncomment मैं एक ही समस्या आप रिपोर्ट प्राप्त करें: अपने कोड के अपने संस्करण है।