I have the following code that drag elements from data list then drop them and connect each other automatically by a line using JsPlumb,
i need to be able to insert an element between two elements, so it will draw a lines before and after new inserted elemenst.
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://stage-preview.gage.com/Creative/Microsoft/EZCourseDemo/scripts/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script>
$(function () {
//Make element draggable
$(".dragItem").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true
});
$("#DropArea").droppable({
accept: '.dragItem',
activeClass: "drop-area",
drop: function (e, ui) {
x = ui.helper.clone();
ui.helper.remove();
$(x).removeAttr("class");
$(x).addClass("dropItem");
x.addClass('jsPlumbItem');
x.appendTo('#DropArea');
AddLine();
}
});
})
function AddLine()
{
jsPlumb.removeAllEndpoints();
var j = 1;
var previous;
$("#DropArea").find(".jsPlumbItem").each(function () {
if (j > 1)
{
var e0 = jsPlumb.addEndpoint(previous);
var e1 = jsPlumb.addEndpoint($(this));
//add line
jsPlumb.connect({ source: e0, target: e1 });
}
else
{
j++;
}
previous = $(this);
});
jsPlumb.draggable($(".jsPlumbItem"));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<style>
.dragItem
{
width:50px;
height:50px;
background-color:blue;
float:left;
}
.dropItem
{
width:50px;
height:50px;
background-color:red;
float:left;
position:relative;
}
</style>
<div>
<div id="container" style="width:60px; height:400px;">
<div id="Item1" class="dragItem">A</div>
<div id="Item2" class="dragItem">B</div>
<div id="Item3" class="dragItem">C</div>
</div>
<div id="DropArea" style="width: 400px; height:400px; border:solid 1px gray; "></div>
</div>
</form>
</body>
Hi Sanfoor,
Your problem is related to JsPlumb, so you could post your problem in JsPlumb forum for professional help.
Best Regards,
Lorris