<!DOCTYPE html>
<html lang="en" onselectstart='return false'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#d1 {
width: 800px;
height: 800px;
border: 1px solid #ccc;
background: #fafafa;
position: relative;
}
#d1 .drawContent{
position: absolute;
width: 100%;
height: 100%;
}
#d1 .drawContent div {
width: 130px;
height: 30px;
border: 1px solid #ccc;
background: #fff;
border-radius: 8px;
position: absolute;
text-align: center;
line-height: 30px;
z-index: 2;
cursor: move;
}
#d1 .drawContent div span {
display: inline-block;
width: 130px;
height: 20px;
line-height: 20px;
cursor: move;
}
#d1 .drawContent div i {
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
position: absolute;
top: -7px;
left: 46%;
border: 1px solid #ccc;
cursor: default;
}
#d1 .drawContent div s {
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
position: absolute;
bottom: -7px;
left: 46%;
border: 1px solid #ccc;
cursor: crosshair;
}
#d1 .drawContent div u {
position: absolute;
display: inline-block;
border: 6px solid transparent;
border-top: 6px solid #ccc;
top: 0px;
left: 58px;
}
#d1 .drawContent div s:hover {
background: #F8BC06;
}
#d1 svg {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
#d2 {
width: 300px;
height: 2000px;
}
ul li {
cursor: default;
}
</style>
</head>
<body>
<ul id="Dragblock">
<li data-name='xiangjiao'>
<span>香蕉</span>
</li>
<li data-name='pingguo'>
<span>苹果</span>
</li>
<li data-name='liulian'>
<span>榴莲</span>
</li>
<li data-name='xigua'>
<span>西瓜</span>
</li>
<li data-name='xihongshi'>
<span>西红柿</span>
</li>
</ul>
<div id='d1'>
<div class="drawContent">
</div>
<svg></svg>
</div>
<div id='d2'></div>
<script type="text/x-handlebars-template" id="content">
{{#each this}}
<div class="{{name}}" data-drag="1" data-id='{{id}}' data-inx='{{inx}}' data-iny='{{iny}}' style="top:{{y}}px;left:{{x}}px">
<u style="display:{{arrow}}"></u>
<span class="label">{{label}}</span>
<s title="输出"></s>
</div>
{{/each}}
</script>
<script type="text/x-handlebars-template" id="line">
{{#each this}} {{#each link}}
<g class="{{name}}">
<path d="M{{../outx}} {{../outy}} Q{{mx1}} {{my1}} {{mx2}} {{my2}} T{{dx}} {{dy}}" stroke="#CCCCCC" fill="none" style="stroke-width: 1px;" />
</g>
{{/each}} {{/each}}
</script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/handlebars.js/4.0.10/handlebars.min.js"></script>
<script type="text/javascript">
var element;
// 获得容器的宽度
var dWidth = Number($('#d1').css('width').slice(0, -2));
// 获得容器的高度
var dHeight = Number($('#d1').css('height').slice(0, -2));
var dragData = []
function reload() {
var myTemplate = Handlebars.compile($("#content").html());
$('#d1 .drawContent').html(myTemplate(dragData));
var myLine = Handlebars.compile($("#line").html());
$('#d1 svg').html(myLine(dragData));
}
// reload();
//按下列表创建虚像
$('#Dragblock li').mousedown(function(e) {
var span = document.createElement('span');
span.innerHTML = $(this).text();
span.setAttribute('data-name', $(this).data('name'));
span.style.opacity = 0.6;
span.style.position = 'absolute';
span.style.top = (e.pageY - 8) + 'px';
span.style.left = (e.pageX - 8) + 'px';
span.style.zIndex = 5;
$(this).append(span);
element = $(this).children('span:last-child');
console.log('element', element);
})
// 文档鼠标抬起时判断在不在容器内，创建元素
$(document).mouseup(function(e) {
console.log('e.target', e.target);
$('#d1').unbind('mousemove');
if(element) {
if(e.pageY > $('#d1').offset().top && e.pageX > $('#d1').offset().left) {
console.log('e.offsetY', e.offsetY, 'e.offsetX', e.offsetX);
console.log(element);
var x = e.pageX - $('#d1').offset().left - e.offsetX;
var y = e.pageY - $('#d1').offset().top - e.offsetY;
//判断x
if((x >= 0 && x <= dWidth - 132)) {
x = x;
} else if(x < 0) {
x = 1;
} else if(x > dWidth - 132) {
x = dWidth - 132
}
//判断y
if((y >= 0 && y <= dHeight - 32)) {
y = y;
} else if(y < 0) {
y = 1;
} else if(y > dHeight - 32) {
y = dHeight - 32
}
dragData.push({
id: dragData.length,
name: element.data('name'),
draw: false,
label: element.text(),
x: x,
y: y,
outx: x + 68,
outy: y + 30,
inx: x + 65,
iny: y - 1,
link: [],
linked: [],
dx: 0,
dy: 0,
arrow: "none"
})
reload();
element.remove();
element = undefined;
} else {
element.remove();
element = undefined;
}
}
})
//拖动虚像在文档中进行移动
$(document).mousemove(function(e) {
//console.log('x',e.pageX,'y',e.pageY);
if(element) {
element.css({
'top': (e.pageY - 8) + 'px',
'left': (e.pageX - 8)
});
}
})
//给创建的新的组件加上mousedown事件
var waitElement;
$('#d1 > .drawContent').on('mousedown', 'div', function(e) {
waitElement = $(this);
console.log(waitElement);
var dx = e.offsetX
var dy = e.offsetY
console.log('e.offsetX', e.offsetX)
console.log('e.offsetY', e.offsetY)
//容器的mousemove事件
$('#d1').on("mousemove",function(e) {
if(waitElement) {
waitElement.css({
top: (e.pageY - $('#d1').offset().top - dy) + 'px',
left: (e.pageX - $('#d1').offset().left - dx) + 'px'
});
console.log(waitElement.data('id'));
var id = waitElement.data('id')
var x = e.pageX - $('#d1').offset().left - dx;
var y = e.pageY - $('#d1').offset().top - dy;
//判断x
if((x >= 0 && x <= dWidth - 132)) {
x = x;
} else if(x < 0) {
x = 1;
} else if(x > dWidth - 132) {
x = dWidth - 132
}
//判断y
if((y >= 0 && y <= dHeight - 32)) {
y = y;
} else if(y < 0) {
y = 1;
} else if(y > dHeight - 32) {
y = dHeight - 32
}
for(var i = 0; i < dragData.length; i++) {
if(id == dragData[i].id) {
console.log(dragData[i]);
dragData[i].x = x;
dragData[i].outx = dragData[i].x + 68;
dragData[i].inx = dragData[i].x + 65;
dragData[i].y = y;
dragData[i].outy = dragData[i].y + 30;
dragData[i].iny = dragData[i].y - 1;
console.log('要开始了')
for(let j = 0; j < dragData[i].link.length; j++) {
dragData[i].link[j].linkId = parseFloat(dragData[i].link[j].name.split("|")[1]);
}
for(var k = 0; k < dragData[i].linked.length; k++) {
console.log('dragData[i].linked[k]', dragData[i].linked[k]);
for(let j = 0; j < dragData.length; j++) {
if(dragData[i].linked[k].linkedNum == dragData[j].id) {
console.log('ID一样了啊');
for(let m = 0; m < dragData[j].link.length; m++) {
if(dragData[i].linked[k].name == dragData[j].link[m].name) {
console.log("名字一样了啊");
dragData[j].link[m].dx = dragData[i].inx;
dragData[j].link[m].dy = dragData[i].iny;
dragData[j].link[m].mx1 = dragData[j].outx;
dragData[j].link[m].my1 = dragData[j].link[m].dy > dragData[j].outy ? dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 4 : dragData[j].outy - (dragData[j].link[m].dy - dragData[j].outy) / 4;
dragData[j].link[m].mx2 = dragData[j].outx + (dragData[j].link[m].dx - dragData[j].outx) / 2,
dragData[j].link[m].my2 = dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 2
}
}
}
}
}
reload();
if(dragData[i].link.length > 0) {
for(var j = 0; j < dragData[i].link.length; j++) {
dragData[i].link[j].mx1 = dragData[i].outx;
dragData[i].link[j].my1 = dragData[i].link[j].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 4 : dragData[i].outy - (dragData[i].link[j].dy - dragData[i].outy) / 4;
dragData[i].link[j].mx2 = dragData[i].outx + (dragData[i].link[j].dx - dragData[i].outx) / 2,
dragData[i].link[j].my2 = dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 2
}
}
reload();
}
}
console.log(dragData);
reload();
}
})
})
//给创建的新的组件加上mouseup事件
$('#d1 > .drawContent > div').mouseup(function() {
waitElement = undefined;
console.log(waitElement);
})
//容器的mouseup事件
$('#d1').mouseup(function(e) {
console.log('我抬起了');
waitElement = undefined;
if(waitElement) {
waitElement.css({
top: e.pageY - $('#d1').offset().top,
left: e.pageX - $('#d1').offset().left
})
}
})
//给组件的输出圆圈加入mouseenter事件使组件不能拖拽
$('#d1 > .drawContent').on('mouseenter', 'div>s', function() {
console.log('进入了输出');
waitElement = undefined;
$('svg').unbind('mousemove');
})
//先给组件的输出源加入mousedown事件，先创建连线
$('#d1 > .drawContent').on('mousedown', 'div>s', function(event) {
event.preventDefault();
event.stopPropagation();
//先创建连线的数据
console.log($(this).parent());
var parent = $(this).parent();
var id = parent.data('id');
console.log('idididid', id);
for(var i = 0; i < dragData.length; i++) {
if(dragData[i].id == id) {
dragData[i].draw = true;
dragData[i].link.push({
name: id + parent.attr('class'),
dx: 0,
dy: 0,
mx1: 0,
my1: 0,
mx2: 0,
my2: 0
});
console.log('dragData哈哈哈哈', dragData);
$('body').on('mouseup', function(e) {
for(var j = 0; j < dragData.length; j++) {
if(id == dragData[j].id) {
console.log('页面抬起了');
dragData[j].draw = false;
var $dom=$(e.target).data("drag")?$(e.target):$(e.target).closest("div[data-drag]");
if($dom.length){
if($dom.data("drag") && $dom[0].dataset.id!=dragData[j].id){//判断是否关联另外模块，非自己
$('svg').unbind('mousemove');
var name=dragData[j].link[dragData[j].link.length - 1].name + "|" + $dom[0].dataset.id + $dom[0].className;
var isontbe=0;//判断是否存在关联
for(let i = 0; i < dragData.length; i++){
if($dom[0].dataset.id == dragData[i].id){
for(let c = 0; c < dragData[i].linked.length; c++){
if(name==dragData[i].linked[c].name){
isontbe=1
}
}
if(!isontbe){//不存在时候存入linked
dragData[i].linked.push({
name: name,
linkedNum:parseFloat(name)
})
dragData[i].arrow = "inline-block";
}
}
}
if(!isontbe){//不存在时候生成link数据
dragData[j].link[dragData[j].link.length - 1].name = name;
dragData[j].link[dragData[j].link.length - 1].dx = Number($dom[0].dataset.inx);
dragData[j].link[dragData[j].link.length - 1].dy = Number($dom[0].dataset.iny);
}else{
dragData[j].link.splice(dragData[j].link.length-1,1);
}
} else {
dragData[j].link.splice(dragData[j].link.length - 1, 1);
}
} else {
dragData[j].link.splice(dragData[j].link.length - 1, 1);
}
$('svg').unbind('mousemove');
reload();
}
}
$('body').unbind('mouseup');
})
}
}
})
//给输出圆圈添加mouseup事件
$('#d1 > .drawContent').on('mouseup', 'div>s', function() {
var parent = $(this).parent();
for(var i = 0; i < dragData.length; i++) {
if(parent.data('id') == dragData[i].id) {
dragData[i].draw = false;
console.log(dragData[i]);
}
}
})
//给组件的输出源加入mouseleave事件使组件继续能够拖拽
$('#d1 > .drawContent').on('mouseleave', 'div>s', function(event) {
event.preventDefault();
event.stopPropagation();
console.log('离开了了输出');
console.log($(this).parent());
waitElement = $(this).parent();
var id = waitElement.data('id')
//给svg加mousemove事件
for(var i = 0; i < dragData.length; i++) {
if(id == dragData[i].id) {
if(dragData[i].draw == true) {
$('svg').mousemove(function(e) {
for(var i = 0; i < dragData.length; i++) {
if(id == dragData[i].id) {
console.log(dragData[i]);
if(dragData[i].link[dragData[i].link.length - 1]) {
dragData[i].link[dragData[i].link.length - 1].dx = e.offsetX;
dragData[i].link[dragData[i].link.length - 1].dy = e.offsetY;
dragData[i].link[dragData[i].link.length - 1].mx1 = dragData[i].outx;
dragData[i].link[dragData[i].link.length - 1].my1 = dragData[i].dy > dragData[i].outy ? dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 4 : dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 4;
dragData[i].link[dragData[i].link.length - 1].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2,
dragData[i].link[dragData[i].link.length - 1].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
}
//
dragData[i].dx = e.offsetX;
dragData[i].dy = e.offsetY;
dragData[i].mx1 = dragData[i].outx;
if(dragData[i].dy > dragData[i].outy) {
dragData[i].my1 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 4;
} else {
dragData[i].my1 = dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 4;
}
dragData[i].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2
dragData[i].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
}
}
reload();
console.log(2333);
})
} else {
$('svg').unbind('mousemove');
}
}
}
})
//给svg添加mouseup事件
$('svg').mouseup(function(e) {
console.log(e.target);
$('svg').unbind('mousemove');
for(var i = 0; i < dragData.length; i++) {
dragData[i].draw = false;
}
console.log('起来了');
})
</script>
</body>
</html>
473
09-24
06-11
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
