Jquery ui - перетаскиваемая проблема с ZoomJquery

Программирование на jquery
Ответить
Anonymous
 Jquery ui - перетаскиваемая проблема с Zoom

Сообщение Anonymous »

Я сталкиваюсь с проблемой при перетаскивании элементов внутри холста, здесь мой холст - Div. Внутри Div у меня есть два перетаскивающих элемента. Я только что применил свойство Zoom для этих перетаскиваемых элементов. Я бы применил масштаб для родительского DIV, но в зависимости от требования я должен применять зум только для элемента перетаскивания. Однако после применения увеличения для перетаскиваемых элементов он плохо реагирует, когда я пытаюсь переместить его на край (оба x & y) холста. Я попробовал некоторые расчеты, но он работает. < /P>

Код: Выделить всё

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();
}
});
$('#dragme1').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();
}
});< /code>
#canvas {
width:500px;
height:250px;
border:1px solid #444;

}
#dragme {
width:100px;
height:50px;
background:#f30;
zoom:0.8;
}

#dragme1 {
width:100px;
height:50px;
background:blue;
zoom:0.8;
}< /code>








Подробнее здесь: https://stackoverflow.com/questions/731 ... -with-zoom
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»