Поэтому я хочу создать сайт, похожий на блок-схему jquery.
Jquery Ссылка на блок-схему github
На основе демонстрации w3school я создал оператор div самостоятельно, и я хотел перетащить его по экрану. Хорошо, это сработало, но если я хочу, чтобы другие div-объекты перетаскивались, то происходит ситуация, которую я показываю на этом небольшом видео.
Мой Google-диск, где видео
код выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Own Block Canvas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<script data-search-pseudo-elements src="https://kit.fontawesome.com/a26f6e4ee4.js" crossorigin="anonymous"></script>
</head>
<style>
#Big_Input,#Switch_Input {
position: relative;
width: 15em;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 2%;
box-sizing:border-box;
display:inline-block;
}
#Big_Inputheader,#Switch_Inputheader {
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border-radius: 2%;
}
.inputs,.outputs{
margin: 1em;
font-size: small;
}
.datetimes{
position: absolute;
bottom: 0;
right: 0;
}
.timer,.date{
width: 7em;
margin: 1em;
}
.input_arrows::before {
color:#000;
content: '\f0da';
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-weight: 900;
font-size: large;
}
</style>
<body>
<div id="canvas">
<div id="Switch_Input">
<div id="Switch_Inputheader">Click here to move</div>
<div class="outputs" style="float: right;">
<p class="output_arrows">Output</p>
</div>
</div>
<div id="Big_Input">
<div id="Big_Inputheader">Click here to move</div>
<div class="inputs" style="float: left;">
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
<p class="input_arrows"> Input</p>
</div>
<div class="outputs" style="float: right;">
<p class="output_arrows">Output</p>
</div>
<div class="datetimes">
<input class="timer" type="text" placeholder="timer">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script>
$(function () {$('#datetimepicker1').datetimepicker({format: 'DD-MM-YYYY LT'});});
dragElement(document.getElementById("Switch_Input"));
dragElement(document.getElementById("Big_Input"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
Вот код Jsfiddle из кода
Моя конечная цель - перетаскивать мои собственные «операторы» или «Блоки» на холсте, возможность связывать его друг с другом вручную и сохранять его в формате json, как в примере с блок-схемой jquery, но с моими собственными пользовательскими элементами div.
Спасибо за ваше понимание.