Перетаскиваемые сдерживающие элементы при повороте элемента с перетаскиванием

У меня есть перетаскиваемый элемент, который также может изменяться и поворачиваться. Однако эти повороты обрабатываются преобразованиями CSS, однако, когда элемент вращается, он выталкивает функцию перетаскивания из-под контроля.Перетаскиваемые сдерживающие элементы при повороте элемента с перетаскиванием

Херес (обновлена) скрипка: Click me

То, что я думаю, что происходит, что, когда элемент поворачивается, его высота и ширина, очевидно, остаются теми же, только под углом, однако, JQuery не учитывает поворот, заставляя его думать, что элемент находится в его нормальном горизонтальном направлении, что приводит к «баггу», показанному в скрипке выше.

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

refreshPositions: true,

Но это не сработало. Также не уничтожил функцию draggable на элементе, а затем повторно инициализировал его. Есть ли способ исправить это, поэтому сдерживание будет нормально функционировать, таким образом, jQuery распознает поворот?

Спасибо.

источник

2017-02-14 Wesley Peeters

Я подозреваю, что вам нужно обернуть преобразованный элемент в DIV. Сделайте div div перетаскиваемым и установите дескриптор в преобразованный элемент. См. Здесь: http://jsfiddle.net/Twisty/fup2ga8p/ вы можете видеть, что исходная коробка все еще используется браузером для ее ограничивающих точек. – Twisty

Пожалуйста, обновите свою скрипту с помощью функции 'pixelsToPercentages', чтобы заставить ее работать –

@DmytroGrynets Обновлена скрипка :) –

Одним из вариантов является обращение с защитой. Вот один из возможных способов сделать это.

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

var boundingContainer, boundingDraggable, prevLeft, prevTop; 

$(".draggable").draggable({ 
    classes: { 
    "ui-draggable-dragging": "highlight-draggable" 
    }, 
    start: function(event, ui) { 
    boundingDraggable = ui.helper[0].getBoundingClientRect(); 
    boundingContainer = ui.helper.closest('#draggableContainer')[0].getBoundingClientRect(); 
    }, 
    drag: function(event, ui) { 

    if(ui.offset.left <= boundingContainer.left){ 
     if(ui.position.left < prevLeft){ 
      ui.position.left = prevLeft; 
     } 
    } 

    if(ui.offset.top <= boundingContainer.top){ 
     if(ui.position.top < prevTop){ 
      ui.position.top = prevTop; 
     } 
    } 

    if(ui.offset.left+boundingDraggable.width >= boundingContainer.right){ 
     if(ui.position.left > prevLeft){ 
      ui.position.left = prevLeft; 
     } 
    } 

    if(ui.offset.top+boundingDraggable.height >= boundingContainer.bottom){ 
     if(ui.position.top > prevTop){ 
      ui.position.top = prevTop; 
     } 
    } 

    prevLeft = ui.position.left; 
    prevTop = ui.position.top; 
    } 
});

Fiddle

источник

2017-02-17 19:25:02 Trevor

Перетаскиваемые сдерживающие элементы при повороте элемента с перетаскиванием

ответ

Смежные вопросы