容器可以拖動嗎？ jsplumb

我想知道是否有可能使jsPlumb容器可拖動。如果在容器上單擊並拖動（不在元素上），它將作爲一個單元移動，以便能夠關注此容器的不同部件或元素。
例如像他們網頁中的例子那樣的流程圖; http://www.jsplumb.org/demo/flowchart/jquery.html 我想要整個容器移動，如果我點擊並拖動，以便所有內部元素也移動。容器可以拖動嗎？ jsplumb

謝謝。

來源

2015-04-20 vcuevas

你可以玩這個example。首先按下New容器按鈕，然後按容器中的New cell。您可以拖動容器以及其中的單元格。

的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); 
} 

});

來源

2015-04-21 05:07:42 alemv

你好，謝謝你的回答，我會盡力解釋一下我想要的東西。我不希望整個容器可拖動，我正在尋找一種方式，如果可能的話，使容器保持固定，並圍繞其內的所有內容和內部項目不應該失去行爲的「模式」。像GPS一樣，容器總是相同的，「建築物」和所有信息保持不變，但你可以四處移動，觀看不同的部分......我不知道我是否讓它變得更明確抱歉...謝謝提前！ – vcuevas

對於嘗試該示例的人員，不要忘記將外部依賴關係更新爲jsplumb，因爲其中的一個已過時並且未找到。 – Overdrivr

是的，你可以用名爲「jQuery UI」的jQuery庫來做到這一點。

查看以下鏈接：

https://jqueryui.com/draggable/

你將能夠做到這一點eazily，在5分鐘內。

來源

2015-04-20 16:56:29 Deadpool

您好感謝您的回答，我會盡力解釋好一點我想要什麼。我不希望整個容器可拖動，我正在尋找一種方式，如果可能的話，使容器保持固定，並圍繞其內的所有內容和內部項目不應該失去行爲的「模式」。像GPS一樣，容器總是相同的，「建築物」和所有信息保持不變，但你可以四處移動並觀看不同的部分......我不知道我是否讓它變得更明確抱歉...謝謝提前！ – vcuevas

您需要爲此提供ajax調用。 Google地圖使用ajax從服務器加載數據。這將是一個複雜的情況，但你可以這樣做： 1）製作固定的容器 - Div 1 {width：100px; height：100px;} 2）在Div1內製作Div2 {width：1000px; height：1000px;}並使其可拖動。 3）現在，你可以看到內容在固定容器內移動的效果 – Deadpool

好吧，我明白了，謝謝我將這一點發揮出來！ – vcuevas

容器可以拖動嗎？ jsplumb

回答

相關問題