Я пытаюсь заставить 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();
}
});
Если у кого-то есть другой обходной путь, я был бы рад услышать его.
$("#canvas").css("zoom")
на0.5
, я получу фактические значения. вместоNaN
илиInfinity
. - person Twisty   schedule 20.04.2017