Какова альтернатива jsplumb при использовании Vue js?

Я разрабатываю приложение, используя quasar framework и Vue js. Первоначально я использовал функцию перетаскивания и связывал их с соединителями в своем веб-приложении с помощью jquery UI и jsplumb.

По сути, библиотека jsplumb — это плагин для jquery, а jquery занимает больше места в памяти, чем Vue js.

Итак, я подумал об использовании чистых функций Vue js для своих требований. Итак, есть ли плагины Vue js, которые выполняют следующие задачи?

1) Возможность перетаскивать блоки из одного контейнера в определенное место в другом контейнере.

2) Возможность добавлять конечные точки (как предусмотрено в jsplumb) к отброшенным блокам

3) И умеет рисовать связующее звено между любыми блоками в контейнере.

Итак, есть ли способ заменить jquery и jsplumb только чистыми Vue js и Quasar?


vuejs2 quasar
person Darshan theerth    schedule 21.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

согласно документации: функции JSPlumb есть версия vue, но похоже, что она платная.

Также в другой части говорится: «Хотя jsPlumb не зависит от jQuery, он также поддерживает селекторы jQuery в качестве аргументов для элементов (ванильный jsPlumb, потому что объект селектора jQuery похож на список, т. Е. Он имеет свойство длины и индексированные методы доступа)». Так что вам не нужен jQuery для использования JsPlumb. Мы получили эту обложку.

Затем вы можете использовать Draggable, который также использует vue.sortable для части перетаскивания.

Итак, что, если у вас уже есть куча селекторов с jsplumb в Jquery? вы можете заменить jquery этим методом селектора:

window.$ = function(selector) {
    var selectorType = 'querySelectorAll';

    if (selector.indexOf('#') === 0) {
        selectorType = 'getElementById';
        selector = selector.substr(1, selector.length);
    }

    return document[selectorType](selector);
};

Фрагмент отсюда: https://blog.garstasio.com/you-dont-need-jquery/selectors/

Надеюсь, поможет.

person Gerardo Rosciano    schedule 21.06.2017
comment
Спасибо. Но Draggable использует vue.sortable, который можно удалить в виде списка. Но есть ли что-нибудь, что отбрасывает блоки в определенное место в div/контейнере? - person Darshan theerth; 22.06.2017
comment
@Darshantheerth Есть vue-dragula (реализация vue dragula), но я никогда не использовал, поэтому не уверен, поможет ли это. - person Gerardo Rosciano; 22.06.2017