我使用EXTjs制作了一个简单的工具包和使用HTML和CSS的画布。我想简单地为拼图图像添加连接器以制作流程图。关于如何做到这一点的任何建议？我有几个拼图和一个输入框，我想最好用端口和线，或只是线连接它们。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Draw Workflow Analysis Diagrams</title>
<script type="text/javascript" src="C:\Users\littleemi\Downloads\ext-4.1.0-commercial\extjs-4.1.0\ext.js"></script>
<script type="text/javascript" src="C:\Users\littleemi\Downloads\ext-4.1.0-commercial\extjs-4.1.0\adapter\ext\ext-base.js"></script>
<script type="text/javascript" src="C:\Users\littleemi\Downloads\ext-4.1.0-commercial\extjs-4.1.0\ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="C:\Users\littleemi\Downloads\ext-4.1.0-commercial\extjs-4.1.0\resources\css\ext-all.css" />
<style type="text/css">
#headings{
font-family:Arial;
color: black;
font-size: 18px;
}
body {
padding: 10px;
}
.availableWidgets {
width: 250px;
border-style: solid;
border-width: 10px;
padding: 10px;
height: 800px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}
.canvas{
width: 1300px;
border-style: solid;
border-width: 10px;
padding: 10 px;
height: 800px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}
.availableWidgets div {
border-style: none;
padding: 3px;
margin: 20px;
cursor: move;
text-align: center;
}
.imgThumb {
border-style: none;
height: 100px;
width: 100px;
display: block;
cursor: move;
margin-left: auto;
margin-right: auto;
}
.dropOK {
background-color: #99ff99 !important;
}
.dropNotOK {
border: 1px solid #FF0000 !important;
}
fieldset {
border: 3px solid #781351;
}
</style>
</head>
<body>
<table class="x-unselectable">
<tr>
<td>
<table>
<tr>
<td align='center'>
<h1 id="headings">Available Widgets</h1>
</td>
</tr>
<tr>
<td>
<div id="widgets" class="availableWidgets">
<div><img src="blue_IP.png" class="imgThumb" title="IP Widget" alt="IP Widget"/></div>
<div><form action="ETservlet2" method="post">
<fieldset>
Enter URL: <input type="text" name="first" value=""/>
<input type="submit" value="Submit"/>
</fieldset>
</form></div>
<div><img src="redPiece.png" class="imgThumb" title="IP Widget" alt="IP Widget"/></div>
<div><img src="orangePiece.png" class="imgThumb" title="IP Widget" alt="IP Widget"/>
</div>
<div><img src="maroonPiece.png" class="imgThumb" title="IP Widget" alt="IP Widget"/></div>
<div><img src="yellowPiece.png" class="imgThumb" title="IP Widget" alt="IP Widget"/></div>
</div>
</td>
</tr>
</table>
</td>
<td align='center' style="width: 200px;">
<table>
<tr>
<td align='center' style="width: 200px;">
<h1 id="headings">Workflow Area</h1>
</td>
</tr>
<tr style="">
<td style="">
<div id="Canvas" class="availableWidgets canvas">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
// A list of method overrides
var overrides = {
//Called when mousedown for a specific amount of time
b4StartDrag : function() {
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//this.el.highlight();
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup
onInvalidDrop : function() {
this.invalidDrop = true;
},
endDrag : function() {
if (this.invalidDrop === true) {
this.el.removeClass('dropOK');
var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
this.el.dom.style.position = '';
}
};
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
}
};
// Configure the widgets to be draggable
var widgetElements = Ext.get('widgets').select('div');
Ext.each(widgetElements.elements, function(el) {
var dd = new Ext.dd.DD(el, 'widgetsDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);
});
//Instantiate instances of Ext.dd.DDTarget for the widgets container
var widgetsDDTarget = new Ext.dd.DDTarget('widgets','widgetsDDGroup');
//Instantiate instnaces of DDTarget for the canvas drop target elements
var canvasDDTarget = new Ext.dd.DDTarget('Canvas', 'widgetsDDGroup');
//Ensure that the rented and repair DDTargets will participate in the trucksDDGroup
//canvasDDTarget.addToGroup('widgetsDDGroup');
});
</script>
</body>
</html>