So erhalten Sie JqueryUI Sortierbare Arbeit mit Zoom/Scale - Mausbewegungen

Question

Ich versuche, Jquery UI Sortable arbeiten mit dem Zoom zu bekommen. Das Problem ist, dass sich die Maus nicht mit derselben Geschwindigkeit bewegt wie das Element, das Sie ziehen. Es gibt einige Beispiele dafür, wie man mit Draggable arbeiten kann. Hier ist ein Beispiel für die Abhilfe für Ziehbare Artikel:

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(); 

}     
}); 

ich das Drag-Ereignis durch das Sortieren Ereignis ersetzt werden in der Sortable Version dieser erwarten würde, aber wie können Sie von der sehen unter Geige funktioniert es nicht. Das Setzen von ui.position im sort-Ereignis hat keine Auswirkungen - es scheint es zu setzen und zu verwerfen, nachdem das Ereignis ausgelöst wurde.

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(); 

}     
}); 

Wenn jemand eine andere Abhilfe hat, würde ich mich freuen, es zu hören.

Answer 1

Geringfügige Unterschiede zwischen ziehbarem und sortierbarem. In der Art ist das ui.helper das Einzelteil und position beeinflußt es nicht in der gleichen Weise, es ist nur ein Bericht seiner Position.

Für Ziehbare, in drag für ui.position, heißt es:

Aktuelle CSS Position des Helfers als { top, left } Objekt. Die Werte können geändert werden, um zu ändern, wo das Element positioniert wird. Dies ist nützlich für benutzerdefinierte Sicherheitsbehälter, Schnappen usw.

Für Sortable, in sort für ui.position, heißt es:

Die aktuelle Position des Helfers als { top, left } vertreten.

Versuchen Sie folgendes:

Beispiel: http://jsfiddle.net/Twisty/4nv60ob9/2/

HTML

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

JavaScript

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())); 
    } 
}); 

Ich denke, das funktioniert auf die gleiche Weise.