Я использую следующее, чтобы нарисовать линию между двумя элементами.Моя проблема в том, что когда элемент находится в области прокрутки, стрелка появляется вне контейнера DIV.Найдите красный прямоугольник, показывающий проблему:
Мне нужно, чтобы линия оставалась внутри DIV, я использую "leader-line.min.js "рисовать линии,
<form id="form1" runat="server">
<script src="Scripts/leader-line.min.js"></script>
<script>
var myLine;
$(document).ready(function () {
dragElement(document.getElementById("mydiv"));
dragElement(document.getElementById("mydiv2"));
myLine = new LeaderLine(
document.getElementById('Node1'),
document.getElementById('mydiv2'),
{
color: 'black',
startPlug: 'square'
}
);
document.getElementById("WFStage").onscroll = function() {myLine.position();};
});
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
var T = 0;
var L = 0;
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
T = (elmnt.offsetTop - pos2);
L = (elmnt.offsetLeft - pos1);
myLine.position();
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
//alert(elmnt.id + ' ' + elmnt.style.top);
if (T < 0) { elmnt.style.top = "0px" }
if (L < 0) { elmnt.style.left = "0px" }
myLine.position();
}
}
</script>
<div class="pageheader" style="background-color: #ffffff">
<b class="text-capitalize">Workflow Designer</b>
</div>
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading">
<div>
<p>
<asp:button id="btnSave" runat="server" text="Save" class="btn btn-info" style="background-color: #5e77ff; border-radius: 4px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);" />
<asp:button id="btnValidate" runat="server" text="Validate" class="btn btn-info" style="background-color: #006600; border-radius: 4px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);" />
<a class="btn btn-info text-capitalize" style="background-color: #5e77ff; border-radius: 4px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);" onclick="AddTemplateField();" role="button">Add Field</a>
<asp:button id="btnViewAll" runat="server" text="View All Workflows" class="btn btn-success" style="border-radius: 4px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);" />
<input id="txtSessionId" clientidmode="Static" type="hidden" runat="server" />
</p>
</div>
<div class="actions pull-right">
<i class="fa fa-chevron-down"></i>
</div>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div id="divSuccessAlert" runat="server">
</div>
<div id="divInfoAlert" runat="server">
</div>
<div id="divWarningAlert" runat="server">
</div>
<div id="divErrorAlert" runat="server">
</div>
<br>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">
<img class="pull-left" src="Images/Mandatory.png"> Workflow Name</label>
</div>
<div class="col-md-10">
<input type="text" class="form-control" id="txtWorkflowName" name="txtWorkflowName" clientidmode="Static" placeholder="Workflow Name" runat="server" maxlength="50" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">
<img class="pull-left" src="Images/Mandatory.png"> Workflow Title</label>
</div>
<div class="col-md-10">
<input type="text" class="form-control" id="txtWorkflowTitle" name="txtWorkflowTitle" clientidmode="Static" placeholder="Workflow Title" runat="server" maxlength="50" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="animated fadeInUp">
<div class="col-md-12" style="position: relative; background-color: white; width: 100%; height: 500px; border: 1px solid gray;">
<div id="WFStage" style="position: absolute;top:0px;left:0px;right:0px;bottom:0px; overflow:auto;">
<table id="mydiv" style="position: absolute; width: 240px; top: 50px; left: 50px;border: 1px solid #6593CF;">
<tr>
<td id="mydivheader" style="cursor: move;"><div style="position: relative;"><img src="images/START.png" style="max-width: none; max-height: none;"><div style="position: absolute; top: 3px; left: 35px;right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;color:#000000;">StartingPoint</div></div></td>
</tr>
<tr>
<td><table id="Node1" style="width:100%;border-bottom: 1px solid #F5F5F5;"><tr><td style="background-color: #F5F5F5;padding-left:5px;padding-right:5px;width:1px;"><a class="fa fa-times-circle"></a></td><td style="background-color: #FFFFFF;padding-left: 10px; padding-right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 0; width: 100%;">True</td></tr></table></td>
</tr>
<tr>
<td><table id="Node2" style="width:100%;border-bottom: 1px solid #F5F5F5;"><tr><td style="background-color: #F5F5F5;padding-left:5px;padding-right:5px;width:1px;"><a class="fa fa-times-circle"></a></td><td style="background-color: #FFFFFF;padding-left: 10px; padding-right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 0; width: 100%;">True</td></tr></table></td>
</tr>
</table>
<table id="mydiv2" style="position: absolute; width: 240px; top: 300px; left: 300px;border: 1px solid #6593CF;">
<tr>
<td id="mydiv2header" style="cursor: move;"><div style="position: relative;"><img src="images/START.png" style="max-width: none; max-height: none;"><div style="position: absolute; top: 3px; left: 35px;right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;color:#000000;">StartingPoint</div></div></td>
</tr>
<tr>
<td><table id="Node3" style="width:100%;border-bottom: 1px solid #F5F5F5;"><tr><td style="background-color: #F5F5F5;padding-left:5px;padding-right:5px;width:1px;"><a class="fa fa-times-circle"></a></td><td style="background-color: #FFFFFF;padding-left: 10px; padding-right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 0; width: 100%;">True</td></tr></table></td>
</tr>
<tr>
<td><table id="Node4" style="width:100%;border-bottom: 1px solid #F5F5F5;"><tr><td style="background-color: #F5F5F5;padding-left:5px;padding-right:5px;width:1px;"><a class="fa fa-times-circle"></a></td><td style="background-color: #FFFFFF;padding-left: 10px; padding-right: 10px; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 0; width: 100%;">True</td></tr></table></td>
</tr>
</table>
</div>
</div>
</section>
</form>
Возможно ли сохранить линию внутри div?