score:1
Accepted answer
You needed to add the JsPlumb library on your jsfidlle, after that you need to add the endpoints after you added yours components on the diagram zone.
I updated your jsfiddle, I hope I've helped.
Html
<div id="startEvent" class="startEventClass"></div>
<div id="userTask" class="userTaskClass"></div>
<div id="endEvent" class="endEventClass"></div>
<div id="diagramZone" class="col-md-8" id="diagramZone"></div>
Css
.startEventClass {
width: 40px;
height: 40px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 30px;
border: solid 2px;
border-radius: 50px;
}
.userTaskClass {
width: 120px;
height: 60px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 30px;
border: solid 2px;
border-radius: 5px;
}
.endEventClass {
width: 40px;
height: 40px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 30px;
border: solid 5px;
border-radius: 50px;
}
#diagramZone {
height: 200px;
border: solid 1px;
}
Javascript
$('.startEventClass').draggable({
helper: "clone",
});
$('.userTaskClass').draggable({
helper: "clone",
});
$('.endEventClass').draggable({
helper: "clone",
});
$('#diagramZone').droppable({
accept: ".startEventClass, .userTaskClass, .endEventClass",
drop: function(e, ui) {
dragE1 = ui.helper.clone();
dragE1.draggable({
containment: "#diagramZone",
});
if (ui.draggable[0].id) {
dragE1.appendTo('#diagramZone');
if ($(dragE1).hasClass("startEventClass")) {
jsPlumb.addEndpoint($(dragE1), {
isSource: true,
anchor: [1, 0.5, 0, 0],
connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
connectorHoverStyle: { lineWidth: 4 },
connector: ["Bezier", { curviness: 10 } ],
maxConnections: 1,
isTarget: false
});
} else if ($(dragE1).hasClass("userTaskClass")) {
jsPlumb.addEndpoint($(dragE1), {
isSource: false,
anchor: [0, 0.5, 0, 0],
connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
connectorHoverStyle: { lineWidth: 4 },
connector: ["Bezier", { curviness: 10 } ],
maxConnections: 1,
isTarget: true
});
jsPlumb.addEndpoint($(dragE1), {
isSource: true,
anchor: [1, 0.5, 0, 0],
connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
connectorHoverStyle: { lineWidth: 4 },
connector: ["Bezier", { curviness: 10 } ],
maxConnections: 1,
isTarget: false
});
} else if ($(dragE1).hasClass("endEventClass")) {
jsPlumb.addEndpoint($(dragE1), {
isSource: false,
anchor: [0, 0.5, 0, 0],
connectorStyle: { strokeStyle: "#316b31", lineWidth: 2 },
connectorHoverStyle: { lineWidth: 4 },
connector: ["Bezier", { curviness: 10 } ],
maxConnections: 1,
isTarget: true
});
}
}
}
});
Related Query
- Json data from table in an onclick function show in seperate div
- Animate div from bottom to top and back
- hiding a div with a value/ output from a php and css stament
- How to select text value from a variable div id tag?
- Slide a div from left-right or right left with preserving div size
- Information shows in a div while pressing button from another div without loading page by jQuery & PHP
- Change iframe target and close target div from one button
- Make div disappear when list from drop down menu is selected
- How to pull down the div container from top?
- Animating div from display none using opacity not working
- How to make a new div for every response from JSON API in JavaScript?
- Hide only click div from echoed php
- jQuery: Update content on a summary DIV based on clicks from other DIV elements
- How to show/hide only the specific div class from a php foreach loop
- Getting images from an endpoint
- How to get value of an input from a div parent via class using jQuery?
- cant show the data from ajax after success in codeigniter in a div
- Div not loading with new PartialView from ajax call
- How to obtain the text value from the current clicked div element
- Select and update specific div from many other div using jquery and ajax
- How to display a input textbox of particular div when selecting a value from select box?
- Make a div slide out from button on hover
- Create animated div which slides in and out from the side
- How to call a div link from another php page?
- Get a label value from a div and show it in html
- How to get text from div
- how to retrieve data from indexeddb and show in a div
- Change the Content of a div from the navigation of another div
- JQUERY or Java script popup loads table from div onclick
- I want to increment multiple div from existing div along with css using for loop
- Opening and closing a div from a link with json data
- Android WebView: get html div from website
- Retrieve Image from database, display and attach it to a link
- Get scrollbar width and minus from div width
- Loading HTML from link & write into div with slick.js library
- How can i select and display text from the third div with jquery
- Moving selections of checkboxes from one div to another
- Elements go out from a div
- Calculate the Height of a Child Div By Subtracting the Height of Another Child Div from the Parent Div
- calling a a div from another to current page through ajax call
- calling a a div from another to current page through ajax call
- Div slide out from side on Click
- Copied checkbox elected value from one div to another div
- how to remove earliest lines from javascript div
- Load content from another div on same page with on select from dropdown using jQuery/Ajax
- Move the div from one location to other location
- Getting value from json object in jquery ajax call and replacing div content with a property from the object
- add class on div from href page after clicked on button with javascript
- Show div if user comes from certain page
- jQuery remove class 'is-active' from div on document click but also on click of the trigger
More Query from same tag
- Javascript: How to display values of all radio buttons regardless of being checked?
- Do not display a user id in the jquery datatable, but it available
- Make ajax loaded content refreshing itself
- href and js to be worked work together on html
- JavaScript - Replace a Function in a Plugin
- Enable click functionality in jquery ui draggable's header
- Call function in img tag in HTML
- Wordpress accordion menu will not expand on click
- Rails toggle attribute dynamically
- jquery returning to original state on mouseout
- JQuery persistent toggle div
- Angularjs Route Uncaught Error: [$injector:unpr]
- Jquery Datepicker not worked in textboxes with class
- ajax make responseText to be an object
- JQuery setTimeout doesn't work for some reason
- how to know the class name of the clicked element in jquery?
- How can I send JSON with $.ajax? (in the naive way, jQuery never sends JSON)
- How to reverse css animation with jquery?
- How do I make my JQuery image slider the width of the screen?
- MVC5 Razor ValidationMessageFor triggered on hidden, not-used div
- jQuery DataTables empty data
- How to hide an accordion tab on second click
- Getting User input with javascript while using three.js?
- dataTable loads but throw undefined is not a function
- PHP Ajax saving multiple textareas without exiting page
- Select/Unselect all checkboxes on a page on button click using jquery
- How to get the closest element by finding innerhtml value using angular?
- JQuery Sticky Headers with Dynamic Content Issues
- Passing information to modal
- Aria Expanded Menu Responsive