Можно ли сделать контейнер перетаскиваемым? jsplumb

Я хотел бы знать, возможно ли сделать контейнер jsPlumb перетаскиваемым. Если вы щелкнете и перетащите контейнер (не элемент), он переместится как единое целое и сможет сфокусироваться на разных частях или элементах этого контейнера.
Например. блок-схема, как пример на их веб-странице; http://www.jsplumb.org/demo/flowchart/jquery.html и я хочу, чтобы весь контейнер двигался, если я щелкну и перетащу, чтобы все элементы внутри также двигались.

Спасибо.


jquery jsplumb
person vcuevas    schedule 20.04.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете поиграть с этим примером. Сначала нажмите кнопку «Новый контейнер», затем кнопку «Новая ячейка внутри контейнера». Вы можете перетаскивать контейнер, а также ячейки внутри него.

JavaScript:

var instanceRegistry = [];
var containerRegistry = [];
var cellRegistry = [];

$(function() {

var endpointOptions = {
   isSource: true,
    isTarget: true
};

$('#newContainerButton').click(newContainer);
$('#newCellButton').click(newCell);

function newContainer() {
var containerIndex = "container" + (containerRegistry.length + 1);
$('#containerTemplate').clone().appendTo('#mainContainer')
    .show()
    .attr('id', containerIndex)
    .draggable({
    containment: 'mainContainer',
    cursor: 'move'
    })
    .find('.newCellButton').click(newCell).end();

containerRegistry.push(containerIndex);
var containerInstance = jsPlumb.getInstance({
    Container: containerIndex,
    Endpoint: [                     // The default Endpoint definition.
        'Dot',                      // Endpoint type
        {                           // Endpoint type options
            radius: 6,              // Defines the radius of the dot
            cssClass: 'cell-endpoint' // A CSS class to attach to the element the Endpoint creates
            }
    ],
    PaintStyle: {                   // The default appearance of a Connector
        strokeStyle: '#2e6f9a',     // color for a Connector
        lineWidth: 2                // width of a Connector's line
    }
});
instanceRegistry.push(containerInstance);
}




function newCell(event) {
var $container = $(event.target).parent();
var cellIndex = "cell" + (cellRegistry.length + 1);
$('#cellTemplate').clone().appendTo($container)
    .show()
    .attr('id', cellIndex);
cellRegistry.push(cellIndex);

var num = containerRegistry.indexOf($container.attr('id'));
var instance = instanceRegistry[num];

instance.draggable(cellIndex, {
    containment: $container,
    cursor: 'move'
});

instance.addEndpoint(cellIndex, {anchor: "Top"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Right"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Bottom"}, endpointOptions);
instance.addEndpoint(cellIndex, {anchor: "Left"}, endpointOptions);
}

});
person alemv    schedule 21.04.2015
comment
Здравствуйте, спасибо за ответ, я постараюсь объяснить немного лучше, что я хочу. Я не хочу, чтобы весь контейнер можно было перетаскивать, я ищу способ, если это возможно, сделать этот контейнер неподвижным и перемещать все, что находится внутри него, и элементы внутри не должны терять свои модели поведения. Что-то вроде GPS, контейнер всегда один и тот же, а здания и вся информация остаются прежними, но вы можете перемещаться и смотреть разные разделы ... Я не знаю, сделал ли я это немного яснее, извините ... заранее спасибо ! - person vcuevas; 21.04.2015
comment
Для тех, кто пробует пример, не забудьте обновить внешнюю зависимость до jsplumb, потому что та, что в ней, устарела и не найдена. - person Overdrivr; 25.11.2015

arrow_upward
0
arrow_downward

Да, вы можете сделать это легко с помощью библиотеки jQuery под названием «jQuery UI».

Проверьте следующую ссылку:

https://jqueryui.com/draggable/

Вы сможете сделать это легко, за 5 минут.

person Deadpool    schedule 20.04.2015
comment
Здравствуйте, спасибо за ответ, я постараюсь объяснить немного лучше, что я хочу. Я не хочу, чтобы весь контейнер можно было перетаскивать, я ищу способ, если это возможно, сделать этот контейнер неподвижным и перемещать все, что находится внутри него, и элементы внутри не должны терять свои модели поведения. Что-то вроде GPS, контейнер всегда один и тот же, а здания и вся информация остаются прежними, но вы можете перемещаться и смотреть разные разделы ... Я не знаю, сделал ли я это немного яснее, извините ... заранее спасибо ! - person vcuevas; 21.04.2015
comment
Для этого вам нужно иметь вызовы ajax. Карта Google использует ajax для загрузки данных с сервера. Это будет сложный сценарий, но вы можете сделать это следующим образом: 1) Сделать фиксированный контейнер - Div 1 {ширина: 100 пикселей; высота: 100 пикселей;} 2) Сделать Div2 внутри div1 {ширина: 1000 пикселей; высота: 1000 пикселей;} и сделать это перетаскивание. 3) Теперь вы получаете эффект перемещения содержимого внутри фиксированного контейнера. - person Deadpool; 21.04.2015
comment
Хорошо, я получил основную идею, спасибо, я немного поиграю с этим! - person vcuevas; 21.04.2015
comment
Добро пожаловать дорогой! Надеюсь, ты понял. - person Deadpool; 21.04.2015