JQuery перетаскивается с проблемой масштабирования

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

Чтобы решить эту проблему, я попытался сделать некоторую математику на позиции перетаскиваемого компонента, но кажется, что даже наглядно ее исправлено, "истинная" позиция не пересчитывается.

вот какой код лучше объяснить:

var zoom = Math.round((parseFloat($("body").css("zoom")) / 100)*10)/10;

var x = $(this).data('draggable').position;
$(this).data('draggable').position.left = Math.round(x.left/zoom);
$(this).data('draggable').position.top = Math.round(x.top/zoom);

Любая помощь будет принята с благодарностью

Ответ 1

Уделил много времени и сил, чтобы исправить это, но, наконец, у меня есть решение, которое работает.

Это решение работает как для Firefox, так и для IE. #canvas - это div, который содержит перетаскиваемый. Обратите внимание, что мы должны убедиться, что элементы остаются внутри холста вручную.

Это также работает, если холст имеет другой уровень масштабирования, чем остальная часть страницы.

var pointerX;
var pointerY;
$(c).draggable({
  start : function(evt, ui) {
    pointerY = (evt.pageY - $('#canvas').offset().top) / zoom - parseInt($(evt.target).css('top'));
    pointerX = (evt.pageX - $('#canvas').offset().left) / zoom - parseInt($(evt.target).css('left'));
  },
  drag : function(evt, ui) {
    var canvasTop = $('#canvas').offset().top;
    var canvasLeft = $('#canvas').offset().left;
    var canvasHeight = $('#canvas').height();
    var canvasWidth = $('#canvas').width();

    // Fix for zoom
    ui.position.top = Math.round((evt.pageY - canvasTop) / zoom - pointerY); 
    ui.position.left = Math.round((evt.pageX - canvasLeft) / zoom - pointerX); 

    // Check if element is outside 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();  

    // Finally, make sure offset aligns with position
    ui.offset.top = Math.round(ui.position.top + canvasTop);
    ui.offset.left = Math.round(ui.position.left + canvasLeft);
  }
});

Ответ 2

В будущем - если кто-то столкнется с одной и той же проблемой - аналогичный вопрос + рабочий ответ можно найти здесь.

Ответ 3

Принимаете ли вы положение прокрутки, маржу и прописку? Например:

x.left + 
parseInt($(this).css('margin-left')) + 
parseInt($(this).css('padding-left')) + 
parseInt($(this).parent().scrollLeft());

x.top + 
parseInt($(this).css('margin-top')) + 
parseInt($(this).css('padding-top')) + 
parseInt($(this).parent().scrollTop());

Затем отрегулируйте значение масштабирования по мере необходимости?

Ответ 4

Я боролся с этим в течение нескольких часов. У меня была сетка, в которой я начал с масштабирования, установив размер шрифта (125% и т.д. В контейнере). Это работало хорошо, пока я не попал в образы, которые не масштабировались с помощью сетки.

Думал, что я бы использовал масштабирование, и он работал блестяще. Тогда я переделал с помощью draggable/droppable, не масштабируя его. Хм.. Проведите несколько часов, пытаясь уничтожить и перезапустить объекты jqueryUI, но ничего не получилось.

Тогда, наконец, я понял, что могу использовать комбинацию размера шрифта для масштабирования сетки и css-zoom для изображений. Теперь все работает, и я могу перетаскивать с одним экземпляром jQueryUI.

Надеюсь, что этот подход поможет кому-то другому.: -)

Ответ 5

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