Горизонтальное и вертикальное изменение размера мышью элемента блока / flexbox с помощью Dragula

Question

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

Поскольку я уже использую Dragula для функции перетаскивания (перемещение элементов), я бы хотел избежать использования https://jqueryui.com/resizable/ для этого изменения размера, и я считаю, что Dragula должен быть в состоянии справиться с этим как Что ж. Но я не смог найти никакой информации об этом, кроме этого https://github.com/bevacqua/dragula/issues/195 где ответ не очень полезен вообще.

Это может быть глупый вопрос, но я, по крайней мере, не могу понять, как реализовать это с Драгулой, поэтому я надеюсь, что один из вас сможет меня просветить.:-)

Answer 1

Вы можете использовать метод move, чтобы разрешить перетаскивание только из определенной области, например:

       constructor(private dragulaService: DragulaService,
          ) {
this.dragulaService.createGroup("CARDS", {
  direction: "vertical",
  moves: (el, source, handle): boolean => handle.className.indexOf("ri-card-header") > -1
});

}

Таким образом, вы можете указать селектор CSS, чтобы определить, разрешить ли перемещение или нет. Если метод move возвращает false, события будут перенаправлены, и перемещение не начнется.