JqueryUIを取得する方法ズーム/スケール - マウス移動でソート可能な作業

Question

Jquery UI Sortableをズームで操作しようとしています。問題は、マウスがドラッグしている要素と同じ速度で移動しないことです。これをDraggableで動作させる方法については、いくつかの例があります。ここではドラッグ可能な項目のための回避策の例です。

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 }オブジェクトとしてヘルパーの

現在のCSSの位置を。要素を配置する場所を変更するために、値を変更することができます。これは、ソート可能のカスタム封じ込めのため、スナップなど便利

で、ui.positionためsortで、それは述べて：

{ top, left }として表さヘルパーの現在位置を。

はこれを試してみてください：

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

私はそれが同じように働いていると思います。