Создание конечных точек jsplumb только для чтения

Вот мое требование. Будут btns, которые можно подключить с помощью jsplumb. Когда последнее соединение установлено на кнопку END, у пользователя не должно быть возможности редактировать/изменить/удалить установленное соединение. Как это сделать? Я пробовал это: $('#target_div_id,.jsplumb-connector,.jsplumb-endpoint,.jsplumb-overlay').addClass('readonly_div');

.readonly_div{
opacity:0.5;
pointer-events: none ;
background-size:cover;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

}

Но этого недостаточно, чтобы сделать элементы jsplumb доступными только для чтения. Любая помощь, пожалуйста!


javascript html jsplumb
person vikram    schedule 28.09.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Установите для глобального свойства ConnectionsDetachable значение false, чтобы предотвратить отсоединение любого соединения.

jsPlumb.importDefaults({
  ...
  ConnectionsDetachable: false
  ...
});

Или используйте свойство detachable, чтобы предотвратить отсоединение от определенного соединения.

var c = jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    detachable: false
});
person jordiburgos    schedule 11.11.2016

arrow_upward
0
arrow_downward

Итак, есть 2 способа добиться этого:

Либо при инициализации конечной точки, например:

this.plumbInstance.addEndpoint(endpointName, {
    isEnabled: false,
    /* other plumb endpoint options */
});

или вы также можете изменить состояние конечных точек:

plumbEndpoint.setEnabled(false);

Изменив isEnabled на false, вы не сможете ничего перетаскивать в это соединение. Однако, насколько я знаю, вы все равно можете разорвать соединение с этой конечной точкой. Чтобы предотвратить это, я написал небольшой метод isValidConnection(endpoint1, endpoint2), который проверяет, могут ли конечные точки быть подключены или нет. В этом методе вы можете проверить, включены ли конечные точки, например:

isValidConnection(endpoint1: Endpoint, endpoint2: Endpoint): boolean {
    const isValid: boolean = endpoint1.isEnabled() && endpoint2.isEnabled();

    // add more checks here if necessary.

    return isValid;
}
person dave0688    schedule 22.07.2019