jQuery - перетаскиваемый div с увеличением - PullRequest
Новая
       17

jQuery - перетаскиваемый div с увеличением

10 голосов
/ 22 декабря 2011

Это мой код:

http://jsfiddle.net/652nk/

HTML 

<div id="canvas">
    <div id="dragme"></div>
</div>

CSS 

#canvas {
    width:500px;
    height:250px;
    border:1px solid #444;
    zoom:0.7;
}
#dragme {
    width:100px;
    height:50px;
    background:#f30;
}

JS 

$(function(){
    $('#dragme').draggable({containment:'parent'})
})

У меня есть серьезная проблема при использовании свойства css zoom.Положение целевого перетаскиваемого элемента div не согласовано с положением курсора.

Есть ли какое-то простое и простое решение? Я должен иметь возможность динамически изменять масштаб.

Ответы [ 3 ]

20 голосов
/ 22 декабря 2011

Вам не нужно устанавливать свойство масштабирования.Я просто добавил разницу в положение Draggable, которая возникает из-за свойства zoom.Надеюсь, это поможет.

Скрипка

http://jsfiddle.net/TqUeS/

JS 

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

    }                 
});
8 голосов
/ 24 октября 2014

Решение выше не сработало для меня. Так что я нашел свой. Я хотел бы поделиться этим, если у кого-то еще есть такая же проблема. 

var zoom = $('#canvas').css('zoom');    
$('#dragme').draggable({
    drag: function(evt,ui)
    {
         var factor = (1 / zoom) - 1

         ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor)
         ui.position.left += Math.round((ui.position.left - ui.originalPosition.left) * factor)   
    }                 
});
2 голосов
/ 16 сентября 2015

Я использовал решения Tuze и Yusuf Demirag и добавил кое-что для перетаскивания по сетке: 

var gridSize = 20;
$('#dragme').draggable({
    grid: [ gridSize , gridSize ],
    snap: true,
    snapTolerance: gridSize/2,

    drag: function(event,ui){
         var factor = (1 / zoom) -1;

         ui.position.top += Math.round((ui.position.top - ui.originalPosition.top) * factor);
         ui.position.top -= ui.position.top % gridSize;
         ui.position.left += Math.round((ui.position.left- ui.originalPosition.left) * factor);
         ui.position.left -= ui.position.left % gridSize;


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

В нем есть небольшая ошибка (иногда он не может получить точное значение, например: 160px), но он работал для того, что мне было нужно.

Надеюсь, это поможет.

...