Question

我的画布中有两个小的绿色div。可以使用下面的代码在画布中使用标识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',                
    });     
}

见下图：

我使用jsPlumb在2个可拖动的div之间划了一条线。

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

是的，这两点在某种程度上受到限制，因为最大线的长度有限但仍然超出画布的边界。下面是画布的html设置和两点。

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

Answer 1

我已经和jsPlumb合作了很长时间，我记得它需要引用很多库。

因为jsPlumb使用jQuery UI中的可拖动功能，所以您可以阅读本文以了解它是如何工作的。

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

在您的情况下，myid_templates_editor_canvas 不会视为包含，它仅用于绘图。所以我建议你修改你的html，如下所示，让我知道你的结果。

我为表元素添加了一个ID，它将是2个端点的包含。包含必须是包含子元素的元素 - 换句话说 - 包含父元素。

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 2

我已经解决了我的问题。我将上面的代码更改为以下代码：

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 3

实际上你可以通过jsPlumb设置包含。查看我的jsFiddle。你的解决方案不起作用的原因是你通过jsPlumb而不是jQuery设置了draggable。他们不了解其他，所以不能一起工作。您需要为draggable功能提供选项：

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

要了解有关jsPlumb中draggable的更多信息，请参阅help。当您获得jsPlumb的实例时，可以显式设置包含容器：

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

如果需要，您还可以指定DragOptions和DropOptions。{/ 3}}。

最好通过jsPlumb设置draggable作为加号，然后在拖动完成后不需要调用重绘。具有很多元素的巨大性能优势。

使用jsPlumb的接口的一个共同特征是元素是拖动。你应该在jsPlumbInstance上使用draggable方法配置这个：
myInstanceOfJsPlumb.draggable("elementId");
...因为如果你不这样做，jsPlumb将不会知道元素已经存在拖动，它不会重新绘制元素。

设置jsPlumb行的容器元素

3 个答案: