Javascript 设置垂直线的容器元素

我的画布中有两个小的绿色

div

s。可以使用以下代码，使用id

myid\u templates\u editor\u 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',                
    });     
}

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在两个可拖动的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');

我不想让线超出画布的边界。见第三张图片

我希望该行包含在画布中，其id为

myid\u templates\u editor\u 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>

---

我与jsPlumb合作已经很长时间了，我记得它需要参考很多库

由于jsPlumb使用jQueryUI中的Dragable特性，您可以阅读本文来了解它是如何工作的

在您的情况下，MyIDyTeMaPraceSeDeloRo.Cuvase<强>不会为<强>。所以我建议你修改你的html如下尝试，让我知道你的结果以及

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

myid\u模板\u编辑器\u可拖动（'div1'）；
myid_模板_编辑器_可拖动（'div2'）；
//使元素可在画布中拖动
函数myid\u模板\u编辑器\u使可拖动（id）{
jQuery（'#'+id）.draggable（{
光标：“移动”，
光标：{顶部：56，左侧：56}，
安全壳：“#主容器”，
});     
}

---

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

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

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

---

希望它能帮助我遇到同样问题的每个人。

实际上，您可以通过jsPlumb设置遏制。看我的。解决方案不起作用的原因是您通过jsPlumb而不是jQuery设置了draggable。他们彼此不知道，所以不能一起工作。您需要提供

draggable

功能的选项：

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

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

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

如果需要（），还可以指定

DragOptions

和

DropOptions

另外，最好通过jsPlumb设置draggable，这样在拖动完成后就不需要调用repaint了。具有大量元素的巨大性能优势

使用jsPlumb的接口的一个共同特征是元素是 拖拉的。您应该在jsp实例上使用draggable方法来 配置此项：

myInstanceOfJsPlumb.draggable("elementId");

…因为如果不这样做，jsPlumb就不会知道某个元素已被删除 拖动，它将不会重新绘制元素