Набор элементов контейнера линии jsPlumb

Question

У меня есть два небольших зеленых div s внутри моего холста. Это может быть сопротивление в пределах холста с идентификатором myid_templates_editor_canvas, с использованием кода ниже:

myid_templates_editor_make_draggable('div1'); 
myid_templates_editor_make_draggable('div2'); 

// Make an element draggable within the canvas 
function myid_templates_editor_make_draggable(id){      
    jQuery('#' + id).draggable({ 
     cursor: 'move', 
     cursorAt: { top: 56, left: 56 }, 
     containment: '#myid_templates_editor_canvas',     
    });  
} 

Смотрите изображения ниже:

Я сделал линия между двумя перетаскиваемыми divs с помощью jsPlumb.

var jsPlumb_instance = jsPlumb.getInstance(); 
var endpointOptions = { 
       anchor:'BottomCenter', 
       maxConnections:1,      
       endpoint:['Rectangle',{width:'0px', height:'0px' }], 
       paintStyle:{fillStyle:'black'}, 
       connectorStyle : { lineWidth: '1px' , strokeStyle: 'black' }, 
       connector : ['Straight'],     
       setDragAllowedWhenFull:true,      


}; 

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions); 
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);  

jsPlumb_instance.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
}); 

jsPlumb_instance.draggable('div1'); 
jsPlumb_instance.draggable('div2'); 

Я не хочу, чтобы линия была за пределами границы области. См. 3-е изображение.

Я хочу, чтобы линия, которая должна содержаться в полотне с идентификатором myid_templates_editor_canvas .Увидь изображение ниже:

Я попытался изменить часть кода выше с кодом ниже, без везения.

jsPlumb_instance[id].draggable(id1, {containment:'#myid_templates_editor_canvas'}); 
jsPlumb_instance[id].draggable(id2 , {containment:'#myid_templates_editor_canvas'}); 

Да, две точки каким-то образом ограничена, так как длина линии максимального была ограничена, но до сих пор не выходит из границы canvas.Below является HTML настройки холста и двумя точками.

<table> 
    <tr> 
     <td> 
      <canvas id="myid_templates_editor_canvas"></canvas> 
      <div id="div1"></div> 
      <div id="div2"></div> 
     </td>   
    </tr> 
</table> 

Answer 1

Я сделал решение моей проблемы. Я изменил код выше, чтобы закодировать ниже:

myid_templates_editor_make_draggable('div1'); 
myid_templates_editor_make_draggable('div2'); 

//Make an element draggable within the canvas 
function myid_templates_editor_make_draggable(id){      
    jQuery('#' + id).draggable({ 
     cursor: 'move', 
     cursorAt: { top: 56, left: 56 }, 
     containment: '#myid_templates_editor_canvas', 
     drag: function(e, ui){  
      jsPlumb_instance.repaintEverything();          
     },    
    });  
} 

я также опустить строку кода, которые делают JsPlumb две конечные точки перетаскиваемым.

var jsPlumb_instance = jsPlumb.getInstance(); 
var endpointOptions = { 
    anchor:'BottomCenter', 
    maxConnections:1,      
    endpoint:['Rectangle',{width:'0px', height:'0px' }], 
    paintStyle:{fillStyle:'black'}, 
    connectorStyle : { lineWidth: '1px' , strokeStyle: 'black' }, 
    connector : ['Straight'],     
    setDragAllowedWhenFull:true,      
}; 

div1Endpoint = jsPlumb_instance.addEndpoint('div1', endpointOptions); 
div2Endpoint = jsPlumb_instance.addEndpoint('div2', endpointOptions);  

jsPlumb_instance.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
}); 

Надеюсь, что это поможет всем, кто сталкивается с той же проблемой со мной.

Answer 2

Я долгое время работал с jsPlumb, и я помнил, что ему нужно обратиться к большому количеству библиотеки.

Поскольку jsPlumb использует перетаскиваемую функцию из пользовательского интерфейса jQuery, вы можете прочитать эту статью, чтобы понять, как она работает.

https://jqueryui.com/draggable/#constrain-movement

В вашем случае, myid_templates_editor_canvas не будет рассматривать в качестве защитной оболочки, то для рисования только. Поэтому я предлагаю вам изменить ваш html, как показано ниже, дайте мне знать ваш результат.

Я положил идентификатор для элемента таблицы, и он будет защитой для двух конечных точек. Сдерживание должно быть элементом, содержащим дочерний элемент - другими словами - родительским элементом.

myid_templates_editor_make_draggable('div1'); 
 
myid_templates_editor_make_draggable('div2'); 
 

 
// Make an element draggable within the canvas 
 
function myid_templates_editor_make_draggable(id){      
 
    jQuery('#' + id).draggable({ 
 
     cursor: 'move', 
 
     cursorAt: { top: 56, left: 56 }, 
 
     containment: '#main-container',     
 
    });  
 
}

<table id="main-container"> 
 
    <tr> 
 
     <td> 
 
      <canvas id="myid_templates_editor_canvas"></canvas> 
 
      <div id="div1"></div> 
 
      <div id="div2"></div> 
 
     </td>   
 
    </tr> 
 
</table>

Answer 3

На самом деле вы можете установить сдерживание через jsPlumb. См. Мой jsFiddle. Причина, по которой ваше решение не срабатывало, заключается в том, что вы настроили draggable через jsPlumb, а не jQuery. Они не знают об этом другим, поэтому не могут работать вместе. Вы должны предоставить варианты draggable функции:

jsPlumb_instance.draggable(element, { containment:true }); 

Чтобы узнать больше о перетаскиваемом в jsPlumb см help. Вы можете установить контейнер сдерживания явно, когда вы получаете экземпляр jsPlumb:

var jsPlumb_instance = jsPlumb.getInstance({ Container:"inner" }); 

Вы также можете указать DragOptions и DropOptions, если вам нужно (more info).

Лучше установить draggable через jsPlumb, в качестве плюса, тогда нет необходимости переписывать после перетаскивания. Огромное преимущество в производительности благодаря множеству элементов.

Общая особенность интерфейсов, использующих jsPlumb, состоит в том, что элементы: draggable. Вы должны использовать метод перемещаемой на jsPlumbInstance в настроить этот:

myInstanceOfJsPlumb.draggable("elementId"); 

... потому что если вы этого не сделаете, jsPlumb не будет знать, что элемент был тащили, и он не будет перекрашивать элемент.