JqueryUI को ज़ूम/स्केल के साथ क्रमबद्ध काम करने के लिए कैसे करें - माउस आंदोलनों

Question

मैं ज़ूमरी यूआई सॉर्ट करने योग्य ज़ूम के साथ काम करने की कोशिश कर रहा हूं। मुद्दा यह है कि माउस उसी तत्व के साथ नहीं चलता है जिस तत्व को आप खींच रहे हैं। ड्रैगगेबल के साथ काम करने के तरीके के बारे में बहुत सारे उदाहरण पोस्ट किए गए हैं। यहाँ खींचने योग्य मदों के लिए वैकल्पिक हल का एक उदाहरण है:

http://jsfiddle.net/TqUeS/660/

var zoom = $('#canvas').css('zoom'); 
var canvasHeight = $('#canvas').height(); 
var canvasWidth = $('#canvas').width(); 

$('.dragme').draggable({ 
drag: function(evt,ui) 
{ 
    // zoom fix 
    ui.position.top = Math.round(ui.position.top/zoom); 
    ui.position.left = Math.round(ui.position.left/zoom); 

    // don't let draggable to get outside of the canvas 
    if (ui.position.left < 0) 
     ui.position.left = 0; 
    if (ui.position.left + $(this).width() > canvasWidth) 
     ui.position.left = canvasWidth - $(this).width(); 
    if (ui.position.top < 0) 
     ui.position.top = 0; 
    if (ui.position.top + $(this).height() > canvasHeight) 
     ui.position.top = canvasHeight - $(this).height(); 

}     
}); 

मैं उम्मीद करेंगे खींचें घटना की क्रमित करने योग्य संस्करण में क्रमबद्ध घटना द्वारा प्रतिस्थापित किया जा करने के लिए है, लेकिन आप से देख सकते हैं के रूप में नीचे पहेली, यह काम नहीं करता है। सॉर्ट इवेंट में ui.position को सेट करने का कोई प्रभाव नहीं पड़ता है - ऐसा लगता है कि यह इसे सेट करता है और ईवेंट की आग के बाद इसे छोड़ देता है।

http://jsfiddle.net/TqUeS/658/

var zoom = $('#canvas').css('zoom'); 
var canvasHeight = $('#canvas').height(); 
var canvasWidth = $('#canvas').width(); 

$('#canvas').sortable({ 
    items: "div", 
sort: function(evt,ui) 
{ 
    // zoom fix 
    ui.position.top = Math.round(ui.position.top/zoom); 
    ui.position.left = Math.round(ui.position.left/zoom); 

    // don't let draggable to get outside of the canvas 
    if (ui.position.left < 0) 
     ui.position.left = 0; 
    if (ui.position.left + $(this).width() > canvasWidth) 
     ui.position.left = canvasWidth - $(this).width(); 
    if (ui.position.top < 0) 
     ui.position.top = 0; 
    if (ui.position.top + $(this).height() > canvasHeight) 
     ui.position.top = canvasHeight - $(this).height(); 

}     
}); 

किसी को भी एक और वैकल्पिक हल है, तो मैं इसे सुनने के लिए खुशी होगी।

Answer 1

ड्रैगगेबल और क्रमबद्ध के बीच मामूली अंतर। क्रम में, ui.helper आइटम है और position इसे उसी तरह प्रभावित नहीं करता है, यह केवल इसकी स्थिति की एक रिपोर्ट है।

खींचने योग्य के लिए, ui.position के लिए drag में, यह कहा गया है:

{ top, left } वस्तु के रूप में सहायक के वर्तमान सीएसएस स्थिति। तत्व को स्थानांतरित करने के लिए मानों को बदला जा सकता है। यह कस्टम रोकथाम, स्नैप, आदि

क्रमित करने योग्य के लिए के लिए उपयोगी है, ui.position के लिए sort में, यह कहा गया है:

सहायक { top, left } के रूप में प्रतिनिधित्व की वर्तमान स्थिति।

इस प्रयास करें:

उदाहरण: http://jsfiddle.net/Twisty/4nv60ob9/2/

एचटीएमएल

<div id="canvas" data-zoom="0.5"> 
    <div class="dragme"></div> 
    <div class="dragme"></div> 
    <div class="dragme"></div> 
</div> 
<div id="report"></div> 

जावास्क्रिप्ट

var zoom = $("#canvas").data("zoom"); 
console.log(typeof zoom, zoom.toString()); 
var canvasHeight = $('#canvas').height(); 
var canvasWidth = $('#canvas').width(); 

$('#canvas').sortable({ 
    items: "div", 
    start: function(e, ui) { 
    console.log("Sort Start Triggered"); 
    }, 
    sort: function(evt, ui) { 
    console.log("Sort Triggered"); 
    // zoom fix 
    ui.position.top = Math.round(ui.position.top/zoom); 
    ui.position.left = Math.round(ui.position.left/zoom); 
    $("#report").html("Top: " + ui.position.top + " Left: " + ui.position.left); 

    // don't let draggable to get outside of the canvas 
    if (ui.position.left < 0) { 
     ui.helper.css("left", 0); 
    } 
    if (ui.position.left + ui.helper.width() > canvasWidth) { 
     ui.helper.css("left", (canvasWidth - ui.helper.width()) + "px"); 
    } 
    if (ui.position.top < 0) { 
     ui.helper.css("top", 0); 
    } 
    if (ui.position.top + ui.helper.height() > canvasHeight) { 
     ui.helper.css("top", (canvasHeight - ui.helper.height()) + "px"); 
    } 
    $("#report").html("Top: " + (canvasHeight - ui.helper.height()) + " Left: " + (canvasWidth - ui.helper.width())); 
    } 
}); 

मुझे लगता है कि एक ही तरीके से काम कर रहा है।