jsPlumb draggable element javascript function - javascript

The JSFiddle will clearly allow you to understand the problem.
I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.
I have a guess that the problem lie with the CSS position but I can't find it.
jsPlumb.ready(function() {
$(".scroll-box").draggable({
drag: function() {
jsPlumb.repaintEverything();
//jsPlumb.repaint($(this));
}
});
// jsPlumb.draggable($(".scroll-box"));
drawEndPoints("in-leaf", "Right");
drawEndPoints("out-leaf", "Left");
});
function drawEndPoints(classname, endpointposition) {
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
jsPlumb.addEndpoint($("." + classname), {
anchor: endpointposition
}, endpointOptions);
//jsPlumb.repaintEverything();
}

You are missing the jsPlumb.setContainer($("body"));
https://jsfiddle.net/mkaran/mLthybzo/
https://jsplumbtoolkit.com/community/doc/home
EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/

Related

Draggable elements with connectors in jsPlumb

I want to implement a mapping app with draggable elements. I have used the following code but when the draggable is set, the div element is not draggable, only the anchor is draggable. What am I missing?
JSFiddle
<style>
.dd{
width:60px;
height:60px;
border:1px solid red;
position:relative;
}
</style>
<div class="container">
<div id="window3" class="dd" style="margin-left:50px;margin-top:100px"></div>
<div id="window4" class="dd" style="margin-left:400px;margin-top:100px"></div>
</div>
<script>
jsPlumb.ready(function () {
//
jsPlumb.draggable($(".dd"));
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 3,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function (e, ui) {
alert('drop!');
}
}
};
var window3Endpoint = jsPlumb.addEndpoint('window3', {
anchor: "Right"
}, endpointOptions);
var window4Endpoint = jsPlumb.addEndpoint('window4', {
anchor: "Left"
}, endpointOptions);
});
</script>
using jQuery draggable allows the div to be draggable but then the anchors become detached.
So the two options are
Use $(".dr").draggable() and find a way to bind anchors to the div
Make the div draggable in jsPlumb.draggable()
Or is my approach completely wrong?
UPDATE: I set the CSS position as absolute in the divs and now the divs are draggable but still the binding is faulty
You missed to invoke jsPlumb.repaintEverything() once the DOM element is dragged.
Here is the version which uses jQuery.draggable()
jsPlumb.ready(function() {
$('.dd').draggable({
//listen for element dragged event
drag: function(){
jsPlumb.repaintEverything();
}
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Dot", {
radius: 10
}],
style: {
fillStyle: 'blue'
},
maxConnections: -1,
connector: "Straight",
connectorStyle: {
lineWidth: 3,
strokeStyle: 'black'
},
scope: "blackline",
dropOptions: {
drop: function(e, ui) {
alert('drop!');
}
}
};
var window3Endpoint = jsPlumb.addEndpoint('window3', {
anchor: "Right"
}, endpointOptions);
var window4Endpoint = jsPlumb.addEndpoint('window4', {
anchor: "Left"
}, endpointOptions);
});
Updated Fiddle

How to show tooltip only if a region is clicked in jVectorMap, and let it open?

I'm using this jVectorMap. By default, it shows tooltip on hover.
Here is what I'm trying to achieve -
Show tooltip only on click (partially working but tooltip should be be above the mouse cursor. I couldn't figure out how to get mouse cursor position.)
Let the tooltip opens until user explicitly clicks on close.
Code: jsfiddle
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionStyle: {
initial: {
fill: "#818486"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
map.tip.show();
map.tip.html(code + "<p>Click to Close</p>");
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
Desire Behavior
I got it working the way you want and updated your fiddle: http://jsfiddle.net/inanda/ufhz316z/5/
Javascript
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
initial: {
fill: "#818486"
},
selected: {
fill: "#C0C0C0"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
var customTip=$('#customTip');
customTip.css({
left: left,
top: top
})
customTip.html(map.tip.text());
customTip.show();
customTip.append(code + "<p>Click to Close</p>");
customTip.children("p").click(function(){
map.clearSelectedRegions();
customTip.hide();
})
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
var left,top;
$('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){
left = e.pageX - 40;
top = e.pageY - 60;
});
HTML
<div id="map"></div>
<div id="x"></div>
<div id="y"></div>
<div id="customTip" class="jvectormap-tip"></div>
CSS
#map {
width: 500px;
height: 400px;
}
You can highlight the selected region via fill or stroke parameters. More details can be found in the documentation of jVectorMap. Here a short example:
regionStyle: {
selected: {
stroke: '#000',
"stroke-width": 1.3,
"stroke-opacity": 1
}
},

jVectorMap on mobile requires 2 clicks

I've been using jVectorMap quite successfully-- it's a wonderful package for displaying interactive maps!
In this case, I only want some regions to be selectable, and there doesn't seem to be an option to set regions active/inactive. So instead, I set "regionsSelectable=false", and then set "selectedRegions" to the ones I want active.
This works fine (showing the correct hover attributes, etc. for "active" regions only)-- with one exception, in iOS. There, it takes two "clicks" (touches) for the "onRegionClick" handler to get invoked. On the first click, the "selectedHover" attributes are set correctly, but "handleRegion" never gets called. A second click, and "handleRegion" is called.
Initialization code looks like:
map = new jvm.WorldMap({
container: $('#mapdiv'),
map: 'world_mill_en',
regionsSelectable: false,
regionStyle: {
initial: { fill: '#0086d0' },
hover: { "fill-opacity": 1.0 },
selected: { fill: '#003a6a' },
selectedHover: { fill: '#ff7a00' }
},
onRegionClick: handleRegion,
selectedRegions:["CN","RU","US"],
...
});
function handleRegion(e,cc) {
alert("cc="+cc);
...
}
What is needed is either a way to "activate" only a few regions, or a way around this two-click problem.
I know this is a bit outdated question, but here is a hack around iOS issue for others like me who bumped to this question while searching for some hack around this.
As you already noted, iPad/iPhone are emulating hover with first "tap" .. and click with second "tap".
So to fix this ackward behavior we will do following (example on fiddle)
var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'green',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "white",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "white",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
if (lastCode && lastCode == country) {
e.preventDefault();
return;
}
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
},
onRegionLabelShow: function (e, el, country) {
if (iOS) {
e.preventDefault();
var map = $("#world-map").vectorMap("get", "mapObject");
if (lastCode) {
map.regions[lastCode].element.setSelected(false);
}
map.regions[country].element.setSelected(true);
$("#world-map").vectorMap("set", "focus", country);
map.setScale(2);
if(country=="US" || country=="RU") {
map.setScale(1);
}
lastCode = country;
}
},
markers: [{
latLng: [37.7833, -122.4167],
name: 'San Francisco'
}]
});
In short words, we are overwriting onRegionLabelShow functionality with custom behavior (only for the iOS devices). Basically we are preventing the tooltip from showing and instead of that we are selecting the hovered (tapped) ccountry, focusing it and storing it's code in global variable.
On second tap we are detecting if the country has changed by comparing current code with last value and in that case un-selecting previously selected country and selecting new one.
It should be fairly easy to adapt the resolution to your needs.
actually, you should check onRegionTipShow:
...
handleIOSClick = function (e, el, code) {
if (istouch) {
var mapObject = $(map).vectorMap('get', 'mapObject');
map.regions[code].element.setSelected(true);
e.preventDefault();
}
},
CreateMap = function () {
if (typeof $(map) !== 'undefined'){
$(map).width(700);
$(map).height(400);
mapObject = $(map).vectorMap({
map: 'us_lcc_en',
onRegionClick: regionClicked,
onRegionTipShow: handleIOSClick,
backgroundColor: "inherit",
regionStyle: {
initial: {
fill: '#477294'
}
}
});
}
},
...

jsPlumb Endpoint offset

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});
To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best

How to hide qtip tooltip after some time has passed?

I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});

Categories