Как заставить JqueryUI Sortable работать с Zoom/Scale — движения мыши

Я пытаюсь заставить 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();  

}                 
});

Я бы ожидал, что событие Drag будет заменено событием Sort в версии Sortable, но, как вы можете видеть из приведенной ниже скрипки, это не работает. Установка ui.position в событии sort не имеет никакого эффекта - кажется, что он устанавливает его и отбрасывает после срабатывания события.

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

}                 
});

Если у кого-то есть другой обходной путь, я был бы рад услышать его.


person Kelly W    schedule 14.01.2016    source источник
comment
Когда я тестирую с помощью перетаскивания, элемент сдвигается к каждому углу. Это ожидаемая активность? Кажется, он хорошо работает в сортируемом. Может быть, я не вижу всей проблемы.   -  person Twisty    schedule 20.04.2017
comment
Тестирование здесь: jsfiddle.net/Twisty/4nv60ob9, если я заменю $("#canvas").css("zoom") на 0.5, я получу фактические значения. вместо NaN или Infinity.   -  person Twisty    schedule 20.04.2017
comment
Он читает его как строку со значением . Работа над исправлением.   -  person Twisty    schedule 20.04.2017
comment
@Twisty, посмотри, что я имею в виду, когда говорю, что мышь не синхронизирована. i.imgur.com/up12PBO.gif   -  person user1274820    schedule 21.04.2017


Ответы (1)


Незначительные различия между перетаскиванием и сортировкой. В сортировке ui.helper является элементом, а position не влияет на него таким же образом, это просто отчет о его позиции.

Для Draggable в drag для ui.position указано:

Текущая позиция CSS помощника как объекта { top, left }. Значения могут быть изменены, чтобы изменить положение элемента. Это полезно для пользовательского сдерживания, привязки и т. д.

Для Sortable в sort для ui.position указано:

Текущая позиция помощника представлена ​​как { 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()));
  }
});

Я думаю, что это работает таким же образом.

person Twisty    schedule 20.04.2017
comment
Мне кажется, что он делает то же самое - в основном, проблема в том, что мышь не синхронизируется с сортируемым элементом - обычно она движется впереди него. Я вижу, что вы изменили ui.position на ui.helper - хотя в jfiddle мышь все еще уходит от сортируемого элемента. - person user1274820; 20.04.2017
comment
@user1274820 user1274820 Я не уверен, что понимаю, что вы имеете в виду. - person Twisty; 21.04.2017
comment
@user1274820 user1274820 это намного сложнее, чем приведенный вами небольшой пример. Вам нужно, чтобы предметы перемещались только по оси Y? Если это так, вы можете рассмотреть вариант axis. Я сделаю еще несколько тестов. Не могли бы вы уточнить свою тестовую среду, Chrome? Fire Fox? Конкретная версия? Мобильный? - person Twisty; 21.04.2017
comment
Эй, Твисти, заметьте, что я не автор оригинального постера, а просто тот, кто это сделал. Я тестировал на хроме. Все, что действительно нужно для того, чтобы это заработало, — это найти способ установить положение элемента. С drag вроде работает ui.position, но почему-то не работает в функции sort. - person user1274820; 21.04.2017
comment
@ user1274820 мои извинения. Недостаточно кофе. ui.position в drag работает, чтобы повлиять на позицию. ui.position в sort не имеет такой же способности. Мы можем использовать css сверху и слева, или .position() на ui.helper - person Twisty; 21.04.2017
comment
Я попробовал ui.helper.position с некоторым кодом, который вы разместили, и не похоже, чтобы он влиял на движение. - person user1274820; 22.04.2017
comment
Беру обратно - похоже, это код для исправления: ui.helper.css("top", Math.round(ui.position.top / zoom)); ui.helper.css("left", Math.round(ui.position.left / zoom)); - Возможно, когда я меняю масштаб на .2, он снова ломается - все еще играю с ним. По крайней мере, теперь я могу изменить его позицию — это было большой проблемой. - person user1274820; 22.04.2017