我正在创建一个界面，以将多个工作站放置在平面图的顶部（图像）。
主要思想是：
到目前为止我的问题：
（固定）
解决方案是：element.offset（）而不是element.position（）
我第一次将工作站从生成拖动到计划中时， 错误的坐标。 （如果我放下它并再次拖动，我会得到正确的 线，但我试图在第一次拖动）所以如果我拖动 元素再次获取正确的坐标并更新数据库 具有正确的值，并且如果我重新加载页面，它将起作用！
我还有第二个问题：
但是现在如果我添加第二个工位（并执行双拖动解决方案），我会得到正确的绳索，但是在重新加载页面时，第二个工位不会被放置在正确的绳索中。
我相信它会被推到与站点大小完全相同的右侧
第三个电台被推到两个电台大小的右侧
我将分享遇到问题的代码：
这是我的CSS：
.circle {
width: 13px;
height: 13px;
border-radius: 50%;
font-size: 8px;
font-weight: bold;
color: #fff;
line-height: 13px;
text-align: center;
cursor:pointer;
}
.spawn {
border:1px dashed #666;
background:#324148;
padding:5px;
}
#plan {
width:1200px;
height:540px;
margin:auto;
background:white;
border: 3px solid rgba(0,0,0,.125);
-webkit-box-shadow: inset 0 0.25rem 0.125rem 0 rgba(0, 0, 0, 0.05) !important;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.move { float:left; }
我的工具栏上有按钮和生成区域：
<div id="toolbar" class="container-fluid">
<div class="row">
<div class="col-sm-4 p-1">
<div class="buttons">
<button onclick="createStation('PE')" class="nbtn pe">PE</button>
<button onclick="createStation('PM')" class="nbtn pm">PM</button>
<button class="nbtn ins">INS</button>
<button class="nbtn det">DET</button>
</div>
</div>
<div class="col-sm-4 spawn"></div>
<div class="col-sm-4 text-right"></div>
</div>
</div>
我的代码（不是很漂亮）在DB的每个工作站上循环，创建div并将div移至电源线：
<?php
$stations = $con->query('SELECT * FROM zapp_clt_station WHERE zone = ?', $zId)->fetchAll();
foreach ($stations as $station) {
$id = $station['type']."".$station['num'];
echo "<div id='".$id."' class='move circle pe context-menu-one'>".$station['num']."</div>";
}
echo "<script>";
foreach ($stations as $station) {
$id = $station['type']."".$station['num'];
echo"
$('#".$id."').offset({
left: ".$station['xCord'].",
top: ".$station['yCord']."
});
";
}
echo "</script>";
?>
我在createStation（）上的代码
function createStation(type) {
swal.mixin({
input: 'text',
confirmButtonText: 'Confirmar',
cancelButtonText: 'Cancelar',
showCancelButton: true,
inputClass: 'form-control',
confirmButtonClass: 'nbtn pm p-1',
cancelButtonClass: 'nbtn pe p-1',
progressSteps: ['1', '2']
}).queue([{
title: 'Escolha o número do posto',
inputPlaceholder: '# do posto'
},
{
title: 'Posto de Interior ou Exterior',
input: 'select',
inputOptions: {
'Int': 'Interior',
'Ext': 'Exterior'
},
inputPlaceholder: 'Escolha',
inputClass: 'form-control',
}
]).then(function(result) {
if (result.value) {
$.ajax({
type: 'POST',
url: 'add-station.php',
data: {
id: result.value,
zone: zone,
company: company,
branch: branch,
type: type
},
dataType: 'json',
success: function(response) {
if (response.codigo == 1) {
var type = response.type.toLowerCase();
$(".spawn").append("<div id='" + response.id + "' class='move circle "+ type +" context-menu-one'>" + response.num + "</div>");
// On every new item..
dragger();
}
if (response.codigo == 0) {
Swal.fire({
type: 'error',
title: 'Oops...',
text: response.mensagem
})
}
},
error: function() {
Swal.fire({
type: 'error',
title: 'Oops...',
text: 'Erro a processar o pedido!'
})
}
});
}
});
}
我的拖动器函数（）
function dragger() {
$('.move').draggable({
containment: '#plan',
stop: function(e, ui) {
element = $(this);
var y = element.position().top;
var x = element.position().left;
var x = Math.round(x - 86);
var y = Math.round(y - 89);
num = ($("#"+ element.attr("id")).html());
// ##### [AJAX TO UPDATE THE STATIONS COORDS] #####
alert (x+'-'+y); //just for debug
$.ajax({
type: 'POST',
url: 'update-station.php',
data: {
zone: zone,
num: num,
x: x,
y: y
},
dataType: 'json',
success: function(response) {
if (response.codigo == 1) {
// DEBUG
}
if (response.codigo == 0) {
Swal.fire({
type: 'error',
title: 'Oops...',
text: response.mensagem
})
}
},
error: function() {
Swal.fire({
type: 'error',
title: 'Oops...',
text: 'Erro a processar o pedido!'
})
}
});
// ##### [AJAX TO UPDATE THE STATIONS COORDS] #####
}
});
}