JqueryUI Nasıl Çalışır Zoomting/Ölçekle Çalışabilir - fare hareketleri

Question

JQuery UI Sortable'ı yakınlaştırmaya çalışıyorum. Sorun, fare sürüklediğiniz öğe ile aynı hızda hareket etmiyor. Bu çalışmayı Draggable ile nasıl alacağınıza dair birkaç örnek var. İşte Draggable öğeler için geçici çözüm bir örnektir:

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

}     
}); 

Ben Drag olay bu sıralanabilir sürümünde sırala olayı ile değiştirilir beklenir, ancak gördüğünüz gibi Fiddle altında, işe yaramıyor. Sıralama etkinliğindeki ui.position öğesinin hiçbir etkisi yoktur - etkinleştikten sonra onu ayarlamak ve atmak gibi görünüyor. Herkes başka bir çözüm varsa

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

}     
}); 

, bunu duymak mutlu olurum.

Answer 1

Sürüklenebilir ve sıralanabilir arasındaki küçük farklar. Sırayla, ui.helper öğedir ve position aynı şekilde etkilemez, yalnızca konumunun bir raporu. Sürüklenebilir için

, ui.position için drag yılında belirtir: { top, left } nesne olarak yardımcısı

Güncel CSS konumunu. Değer, öğenin konumlandırılacağı yerde değişiklik yapmak için değiştirilebilir. Bu gibi Sıralanabilir için

özel çevreleme, dayanmada, için yararlıdır, ui.position için sort de belirtir:

{ top, left } olarak temsil helper geçerli konum.

bu deneyin:

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

Bence aynı şekilde çalışıyor.