Jquery UI Draggable: как сделать диагональную сетку и плавное перетаскивание элемента по сетке?

Question

[Амир Гафуров]

Чтобы не плодить вопросы, напишу сразу 2 тут:
1. Возможно ли повернуть сетку на 45 градусов, чтобы элемент можно было перетаскивать по диагонали?
Вот так выглядит сетка и элемент:

Для того чтобы была возможность передвигать по диагонали, шаг сетки я сделал как половина диагонали одной ячейки, но возникает вот такая ситуация:

Возможно ли повернуть сетку на 45 градусов, чтобы элемент можно было перетаскивать по диагонали?
(Элемент обёрнут в "красный" div, на который и вешается .draggable)

2. Анимации передвижения не видно, то есть элемент всегда строго в сетке, промежуточного состояния нет. Можно сделать, чтобы элемент был виден под курсором всегда, но при отпускании он "прилипал" к сетке?
Спасибо!

Answer 1

[Eugene Obrezkov]

Напишите для этого свой Draggable. Их очень просто писать и просто подстраивать под свои условия.
Вешаете на элемент событие mousedown, где ставите флаг - перетаскивание началось. В момент нажатия вешаете еще два обработчика mousemove и mouseup. Где производите вычисления драга и снимаете драг соответственно.

Comments

[Амир Гафуров]

Боюсь у меня недостаточно опыта для написания своего обработчика:(

[Eugene Obrezkov]

@amir73911 Написано от руки быстро, так как спешу :)

var dragging = false;
$(function() {
var target = $('#target')
target.mousedown(function() {
dragging = true
})
$(document).mouseup(function() {
dragging = false
})
$(document).mousemove(function(e) {
if (dragging) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - 10, mouse_y - 10);
var degree = (radians * (180 / Math.PI) * -1) + 90;
target.css('-moz-transform', 'rotate(' + degree + 'deg)');
target.css('-moz-transform-origin', '0% 40%');
target.css('-webkit-transform', 'rotate(' + degree + 'deg)');
target.css('-webkit-transform-origin', '0% 40%');
target.css('-o-transform', 'rotate(' + degree + 'deg)');
target.css('-o-transform-origin', '0% 40%');
target.css('-ms-transform', 'rotate(' + degree + 'deg)');
target.css('-ms-transform-origin', '0% 40%');
}
})