I am dragging a div within a main div with respect to y-axis.
$("#childdiv").draggable({axis:'y'});
It drags smoothly in y axis. But I want a drag with jerks..
For Example : When I start drag .. the draggable component directly moves to 50px and if I again drag next jump will be to 100px next drag will directly jump to 150px . It should be simillar like sortable with placeholder but using draggable.
You can use the grid option to get this:
Snaps the dragging helper to a grid, every x and y pixels. The
array must be of the form [ x, y ].
eg.
$("#childdiv").draggable({
axis:'y',
grid: [0, 50]
});
Here's an example fiddle: https://jsfiddle.net/g1epL4ea/
Related
I'm using the Drag Source and Drag Target features from https://vaadin.com/docs/latest/create-ui/dnd (Vaadin 23).
I want to realize a moving operation on a map. This means I got points on a map (as custom Vaadin components) and ...
when dragging them the source position should be hidden (this could be done via point.addDragStartListener(...); as far as I can see)
when dropping them I need to know the drop position relative to the map as x/y coordinates (e.g. clientX and clientY).
As result, the component should be moved from the dragging start position to the drop position. It's parent div has the style attribute position: relative; and the component itself has an absolute position with top and left coordinates in px, e.g.: position: absolute; top: 183px; left: 254px;. With the drop event I have to update the top and left values in the css styling and therefore I need the coordinates of the drop position.
I can't see a suitable method in dropTarget.addDropListener(...); to get the coordinates. Do you have any hint / code samples for me? Thanks!
I found a solution:
dropTarget.getElement().addEventListener("drop", this::onDrop)
.addEventData("event.offsetX")
.addEventData("event.offsetY");
And an apropriate method onDrop:
private void onDrop(DomEvent event) {
JsonObject eventData = event.getEventData();
double x = eventData.getNumber("event.offsetX");
double y = eventData.getNumber("event.offsetY");
[do some stuff...]
}
I'm having some trouble with highstock. I've figured out how to shuffle around other series via the y axis object, however I'm looking to dynamically add more series, and shift the navigator down after I add additional series, along with increasing the height of the containing div as more series are added.
My current approach to moving the navigator is to update the top property of the y axis assigned to the navigator, as informed by this answer:
Move the Highstock navigator position
function moveNavigator(){
chart.navigator.yAxis.update({
height : 50,
top: 202
});
}
http://jsfiddle.net/dwhcj3e7/2/
If my understanding were correct this fiddle should move the navigator from on top of the chart to the bottom of the chart. Is there a way to accomplish this behavior without completely making a new chart object?
Use chart.update() method (available from version 5) and update navigator's top property.
chart.update({
navigator: {
top: 202,
height: 50
}
});
example: http://jsfiddle.net/dwhcj3e7/3/
I want to display the Highcharts ECG Graph with Position next and previous buttons on far right and left side of the chart so that user could move previous and next graph. I need to move previous and next graph by using > < image on far right and left. Please help
You can add two buttons and use css styles for positions them. You need to catch click event and use setExtremes which allows to define range in xAxis.
http://api.highcharts.com/highcharts#Axis.setExtremes()
EDIT:
http://jsfiddle.net/Q8BHZ/
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(0, 5);
});
I've noticed that the CSS3 scale attribute does really bad things to jquery ui, specifically to sortable. The problem is that the mouse still needs to move as much as if the elements were not scaled. Check out this jsfiddle example.
Does anybody have thoughts on how to fix this? Is it possible to change the speed that the mouse moves? I'm going to look into the html5 native drag and drop next, and try to write my own sortable function.
UPDATE:
Jquery ui draggable works ok with CSS3 scaled elements, here is a fiddle for it.
It turns out the real answer does not require writing special move functions. Jquery ui sortable can be used as long as the items being sorted have been wrapped in a div of the appropriate size with overflow hidden. Check this jsfiddle for an example.
The problem was that I had forced the scaled divs to be close to one another using a negative margin. Then when I started to drag an item it was taking up the wrong amount of space. With the scaled item wrapped in a non-scaled div everything works as expected.
I don't have a solution for working with jquery ui but I do have a solution for working with Raphael and by extension other svg objects.
First, using chrome or firefox, go drag the dots around in this jsfiddle. Be sure to drag both dots and to use the slider at the bottom to change the scale of the box. The slider has a default scale range of .4 to 1.2. In Chrome the slider is actually a slider but in Firefox it shows up as a textbox. If you are using firefox enter values that are 100 x the scale, i.e. 70 => 0.7.
What you should have just experienced is that the black dot tracks with the mouse regardless of the scale and the red dot only tracks when the scale is 1.0.
The reason for this is the two dots are using different 'onMove' functions. The black dot moves according to 1/scale while the red dot moves normally.
var moveCorrected = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + (1/scale)*dx,
cy: this.oy + (1/scale)*dy
});
}
var move = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
}
So, in answer to my original question. You can't (and shouldn't) be able to change how the mouse moves, that is clearly user defined behavior, but you can change the move function of the object being moved to track with the mouse.
I'm working on a menu system where I want a ul to show as a dropdown when the users does a mouseOver on li in another ul. I thought I'd use position to set the position of the dropdown (so it actually looks like a menu). What I want is the dropdown's top left corner to start at the same place as the bottom left corner of the wrapping listitem.
Unfortunately the positioning fails in several different ways:
In Firefox it seems like the dropdown's are offset with approximately -100 25 pixels
the first item in the list has a different offset on the left side compared to the other items
The offset in IE is not the same as in FF
Doing the positioning repeatedly in explorer results in different positions each time.
I've created a test page where you can see the effects:
http://test.evju.biz/test/test_position.html
We've solved it by not using the jquery.ui.position. Here is the code we ended up using:
$(this).find("ul.subnav").first().css({
left: $(this).position().left + 'px',
top: ($(this).position().top + $(this).height()) + 'px'
});