Skip to content

Commit f2b1f3f

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
拖拽连线
1 parent beb357c commit f2b1f3f

9 files changed

Lines changed: 927 additions & 0 deletions

File tree

‎04-常用功能/06-拖拽&连线/jqueryui-draggable-mobile-demo/JqUI.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<div id="draggable" class="ui-widget-content">
4+
<p>请拖动我！</p>
5+
</div>
6+
</div>
7+
</template>
8+
<script>
9+
import jsplumb from 'jsplumb'
10+
export default {
11+
mounted(){
12+
$(function() {
13+
$( "#draggable" ).draggable()
14+
})
15+
}
16+
}
17+
</script>
18+
19+
<style scoped lang="scss">
20+
#draggable { width: 150px; height: 150px; padding: 0.5em; }
21+
</style>

‎04-常用功能/06-拖拽&连线/jqueryui-draggable-mobile-demo/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>vue-drag-line</title>
9+
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
10+
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
11+
<script src="./lib/jquery.ui.touch-punch.js"></script>
12+
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css">
13+
</head>
14+
<body>
15+
<noscript>
16+
<strong>We're sorry but vue-drag-line doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17+
</noscript>
18+
<div id="app"></div>
19+
<!-- built files will be auto injected -->
20+
</body>
21+
</html>

‎04-常用功能/06-拖拽&连线/jqueryui-draggable-mobile-demo/lib/jquery.ui.touch-punch.js‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
/*!
2+
* jQuery UI Touch Punch 0.2.3
3+
*
4+
* Copyright 2011–2014, Dave Furfero
5+
* Dual licensed under the MIT or GPL Version 2 licenses.
6+
*
7+
* Depends:
8+
* jquery.ui.widget.js
9+
* jquery.ui.mouse.js
10+
*/
11+
(function ($) {
12+
13+
// Detect touch support
14+
$.support.touch = 'ontouchend' in document;
15+
16+
// Ignore browsers without touch support
17+
if (!$.support.touch) {
18+
return;
19+
}
20+
21+
var mouseProto = $.ui.mouse.prototype,
22+
_mouseInit = mouseProto._mouseInit,
23+
_mouseDestroy = mouseProto._mouseDestroy,
24+
touchHandled;
25+
26+
/**
27+
* Simulate a mouse event based on a corresponding touch event
28+
* @param {Object} event A touch event
29+
* @param {String} simulatedType The corresponding mouse event
30+
*/
31+
function simulateMouseEvent (event, simulatedType) {
32+
33+
// Ignore multi-touch events
34+
if (event.originalEvent.touches.length > 1) {
35+
return;
36+
}
37+
38+
event.preventDefault();
39+
40+
var touch = event.originalEvent.changedTouches[0],
41+
simulatedEvent = document.createEvent('MouseEvents');
42+
43+
// Initialize the simulated mouse event using the touch event's coordinates
44+
simulatedEvent.initMouseEvent(
45+
simulatedType, // type
46+
true, // bubbles
47+
true, // cancelable
48+
window, // view
49+
1, // detail
50+
touch.screenX, // screenX
51+
touch.screenY, // screenY
52+
touch.clientX, // clientX
53+
touch.clientY, // clientY
54+
false, // ctrlKey
55+
false, // altKey
56+
false, // shiftKey
57+
false, // metaKey
58+
0, // button
59+
null // relatedTarget
60+
);
61+
62+
// Dispatch the simulated event to the target element
63+
event.target.dispatchEvent(simulatedEvent);
64+
}
65+
66+
/**
67+
* Handle the jQuery UI widget's touchstart events
68+
* @param {Object} event The widget element's touchstart event
69+
*/
70+
mouseProto._touchStart = function (event) {
71+
72+
var self = this;
73+
74+
// Ignore the event if another widget is already being handled
75+
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
76+
return;
77+
}
78+
79+
// Set the flag to prevent other widgets from inheriting the touch event
80+
touchHandled = true;
81+
82+
// Track movement to determine if interaction was a click
83+
self._touchMoved = false;
84+
85+
// Simulate the mouseover event
86+
simulateMouseEvent(event, 'mouseover');
87+
88+
// Simulate the mousemove event
89+
simulateMouseEvent(event, 'mousemove');
90+
91+
// Simulate the mousedown event
92+
simulateMouseEvent(event, 'mousedown');
93+
};
94+
95+
/**
96+
* Handle the jQuery UI widget's touchmove events
97+
* @param {Object} event The document's touchmove event
98+
*/
99+
mouseProto._touchMove = function (event) {
100+
101+
// Ignore event if not handled
102+
if (!touchHandled) {
103+
return;
104+
}
105+
106+
// Interaction was not a click
107+
this._touchMoved = true;
108+
109+
// Simulate the mousemove event
110+
simulateMouseEvent(event, 'mousemove');
111+
};
112+
113+
/**
114+
* Handle the jQuery UI widget's touchend events
115+
* @param {Object} event The document's touchend event
116+
*/
117+
mouseProto._touchEnd = function (event) {
118+
119+
// Ignore event if not handled
120+
if (!touchHandled) {
121+
return;
122+
}
123+
124+
// Simulate the mouseup event
125+
simulateMouseEvent(event, 'mouseup');
126+
127+
// Simulate the mouseout event
128+
simulateMouseEvent(event, 'mouseout');
129+
130+
// If the touch interaction did not move, it should trigger a click
131+
if (!this._touchMoved) {
132+
133+
// Simulate the click event
134+
simulateMouseEvent(event, 'click');
135+
}
136+
137+
// Unset the flag to allow other widgets to inherit the touch event
138+
touchHandled = false;
139+
};
140+
141+
/**
142+
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
143+
* This method extends the widget with bound touch event handlers that
144+
* translate touch events to mouse events and pass them to the widget's
145+
* original mouse event handling methods.
146+
*/
147+
mouseProto._mouseInit = function () {
148+
149+
var self = this;
150+
151+
// Delegate the touch handlers to the widget's element
152+
self.element.bind({
153+
touchstart: $.proxy(self, '_touchStart'),
154+
touchmove: $.proxy(self, '_touchMove'),
155+
touchend: $.proxy(self, '_touchEnd')
156+
});
157+
158+
// Call the original $.ui.mouse init method
159+
_mouseInit.call(self);
160+
};
161+
162+
/**
163+
* Remove the touch event handlers
164+
*/
165+
mouseProto._mouseDestroy = function () {
166+
167+
var self = this;
168+
169+
// Delegate the touch handlers to the widget's element
170+
self.element.unbind({
171+
touchstart: $.proxy(self, '_touchStart'),
172+
touchmove: $.proxy(self, '_touchMove'),
173+
touchend: $.proxy(self, '_touchEnd')
174+
});
175+
176+
// Call the original $.ui.mouse destroy method
177+
_mouseDestroy.call(self);
178+
};
179+
180+
})(jQuery);

‎04-常用功能/06-拖拽&连线/jqueryui-draggable-mobile-demo/lib/jquery.ui.touch-punch.min.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎04-常用功能/06-拖拽&连线/jsplumb-demo/Lines.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div>
3+
<div class="flowchart-demo">
4+
<div class="dragEle" id="flowchartWindow1">1</div>
5+
<div class="dragEle" id="flowchartWindow2">2</div>
6+
<div class="dragEle" id="flowchartWindow3">3</div>
7+
<div class="dragEle" id="flowchartWindow4">4</div>
8+
</div>
9+
</div>
10+
</template>
11+
<script>
12+
import jsplumb from 'jsplumb'
13+
export default {
14+
mounted(){
15+
jsPlumb.ready(function() {
16+
var j = jsPlumb.getInstance({
17+
DragOptions: { cursor: 'pointer', zIndex: 2000 },
18+
PaintStyle: { stroke: 'red', strokeWidth: 3 }, // 配置拖拽小点时连接线默认样式
19+
Endpoint: ['Dot', {radius: 5}], // 连线终端小点的半径
20+
EndpointStyle : { fill : 'red' },
21+
EndpointHoverStyle : { fill : 'blue' },
22+
Connector: ['Flowchart',{curviness:70}],
23+
ConnectionOverlays: [
24+
[ 'Arrow', { location: 1 } ],
25+
[ 'Label', {
26+
location: 0.5,
27+
label: 'test',
28+
id: 'label',
29+
cssClass: 'aLabel'
30+
}]
31+
],
32+
Container:'flowchart-demo'
33+
})
34+
35+
j.draggable(document.getElementsByClassName('dragEle'));
36+
j.addEndpoint('flowchartWindow1',{uuid:1 , anchor: "TopCenter", isSource:true});
37+
j.addEndpoint('flowchartWindow2',{uuid:2 ,anchor:'Right', isTarget:true});
38+
j.addEndpoint('flowchartWindow3',{anthors:'Right', isTarget:true});
39+
// let line = j.connect({uuids: ["1", "2"], editable: true})
40+
j.connect({
41+
uuids:[1,2], // 根据uuid进行连接
42+
paintStyle: { stroke: 'red', strokeWidth: 3 }, // 线的样式
43+
endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2 }, // 点的样式
44+
overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ] // 覆盖物 箭头 及 样式
45+
})
46+
});
47+
}
48+
}
49+
</script>
50+
51+
<style scoped lang="scss">
52+
.flowchart-demo {
53+
width: 800px;
54+
height: 600px;
55+
border: 1px solid #000;
56+
position: relative;
57+
.dragEle {
58+
position: absolute;
59+
border: 1px solid #15a1ff;
60+
width: 60px;
61+
height: 60px;
62+
}
63+
}
64+
65+
#flowchartWindow1 {
66+
top: 34em;
67+
left: 5em;
68+
}
69+
#flowchartWindow2 {
70+
top: 7em;
71+
left: 36em;
72+
}
73+
#flowchartWindow3 {
74+
top: 27em;
75+
left: 48em;
76+
}
77+
#flowchartWindow4 {
78+
top: 23em;
79+
left: 22em;
80+
}
81+
82+
</style>

0 commit comments

Comments
 (0)