Управление перетаскиванием на повернутых элементах

Question

это мой первый пост здесь, так что будьте осторожны со мной;)

Я пытаюсь сделать простой редактор, используя MooTools (все еще 1.2.5, хотя ..). Каждый элемент имеет угол перетаскивания, чтобы изменить его размер.

Всё работает очень хорошо, пока элемент не будет повернут. После присвоения ему свойства -moz-transform: rotate (Xdeg) перетаскивания сводятся с ума (простой пример: http://jsfiddle.net/HTg57/1/)

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

Вопрос в том, есть ли где-нибудь библиотеки, которые могут справиться с этой проблемой? Я думаю, что знаю, как решить проблему самостоятельно, но это займет время, которого у меня нет.

Итак, есть ли готовые решения для правильной работы перетаскивания при вращении элемента?

Answer 1

не уверен, что вы подразумеваете под «работать должным образом», но вы действительно должны посмотреть на это, что имеет больше смысла (мудрое поведение): http://jsfiddle.net/dimitar/HTg57/2/

var Box = new Class({

    mEl: null,

    mDragEl: null,

    mDrag: null,

    initialize: function(pEl) {
        this.mEl = pEl;
        this.createDrag();
    },

    createDrag: function() {
        this.mDragEl = new Element('div', {
            'class': 'drag'
        }).inject(this.mEl);
        this.mEl.makeResizable({
            handle: this.mDragEl,
            limit: {
                x: [60,300],
                y: [60,300]
            }
        });
    }
});

new Box(document.getElement('div.box'));
new Box(document.getElement('div.rotate'));

это использует element.makeResizable с дескриптором и ограничителем размера. он отлично работает, когда элемент вращается. веселиться ...