jsPlumb предотвращает перетаскивание блоков с экрана

В настоящее время поля, которые я создаю в jsPlumb, можно перетаскивать с экрана, как мне предотвратить перетаскивание полей в самую левую часть моего экрана? Как показано на этой картинке:

введите здесь описание изображения

На моей странице также есть меню вверху, как мне применить ту же тактику, чтобы мои ящики не могли пройти через строку меню?


javascript jsplumb
person PhoonOne    schedule 13.01.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Используя параметр containment, вы можете ограничить перетаскивание блоков внутри определенного DIV:

$('#BoxId').draggable({
    containment: "#containerId",
    drag:function(e){
        jsPlumb.repaint($(this));
    }
});

для перетаскивания jsPlumb:

jsPlumb.draggable($("BoxId"), {
    containment:"containerId" // no need of '#'
});
person MrNobody007    schedule 15.01.2014
comment
это моя скрипка: jsfiddle.net/3HauW/66 мой #containerId должен быть классом div имя? @pruthvi бхарадвадж - person PhoonOne; 15.01.2014
comment
@Jenny Я бы порекомендовал вам поместить все поля в один DIV (контейнер), который будет находиться под строкой меню. Позже вы можете использовать указанную выше опцию, чтобы ограничить ящики внутри контейнера. - person MrNobody007; 16.01.2014
comment
Я только что добавил ‹div id = 'body'› ‹/div›, и это создаст этот div, а затем containerment:body ? @Прутви Бхарадвадж - person PhoonOne; 16.01.2014
comment
Я бы порекомендовал вам выбрать другое имя для div, чем body. Да, сдерживание: тело сделает свою работу. - person MrNobody007; 17.01.2014
comment
Мне нужно было включить #, например. содержание: #основной# - person David Conlisk; 28.04.2014