I have a d3 element 'itemGroup' which has other elements within it. One of these is a text label that I'd like to subscribe to the click events of.
Additionally, I'd like the itemGroup to be draggable. Without the code below the click events fire as expected. With the below code I get the drag behaviour I want, but the click event on the child element of itemGroup no longer fires.
d3.selectAll(".itemGroup").call(d3.drag().clickDistance(4).on("start", started));
I thought that 'clickDistance' was meant to address this but setting any large or small value doesn't seem to have any effect. I expected a value of '4' to mean that the drag behaviour wouldn't kick in until 4 or more distance units have been travelled by the mouse (in the mousedown state), but I see the drag behaviour start immediately.
Tried with 4, 40, 4000.... nothing changes the behaviour. I'm on the latest and greatest version to date.
Any ideas?
Related
I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?
I'm working on a network graph and somebody helped get me to the point where I can hide/show nodes when clicking on them. However, there seems to be default behaviour which redraws the nodes when you move the mouse at all.
Here is the fiddle: https://jsfiddle.net/oLbkpsag/. You'll see that clicking a node hides its children, however if you mouse the mouse after clicking then the node reappears.
I added in
addClass('hide-tree-element')
which has helped on the dataLabel, but the marker or "graphic" redraws every time.
It seems that there is default behaviour to "dim other series" when hovering https://github.com/highcharts/highcharts/issues/9899. Which I thought might be affecting it. I've tried disabling that but it doesn't seem to work.
Any help would be gratefully received!
You're right, the inactive state redraws each point on mouseOut event.
To change this default behavior you can simply wrap Highcharts.Series.prototype.onMouseOut method and remove the piece of code responsible for removing inactive state functionality (added here: https://github.com/highcharts/highcharts/commit/f86f50f80160f078bd185e8e5db1251f317f9fff#diff-12c0e234e06f670ee77d64cce2a9205dL768):
// Reset all inactive states
chart.series.forEach(function (series) {
series.setState('', true);
});
Demo:
https://jsfiddle.net/BlackLabel/zrL8w067/
I need to simulate a dragging effect, basically when an user click and kept hold the mouse on a DIV, it should be re-positioned accordingly to mouse coordinates (following the mouse).
This script works fine:
http://jsbin.com/vurumupoqu/1/
Except when a user click and hold very near the edge of the DIV and move FAST and far away the mouse outside the DIV, in this case is not being dragged at all.
I have tried several option with mouseleave and mouseout with not success.
I need the DIV being dragged even if the user move fast the mouse when key is hold anywhere on the page.
I would like to know:
How to fix this issue? (I meanly target latest Chrome and Firefix).
Could be a better option using HTML5 drag? If yes why?
Bind the mousemove event handler to document instead of the element itself:
document.addEventListener('mousemove', function (event) {
console.log('+ mousemove')
this.logicDrag();
}.bind(this));
http://jsbin.com/deyiwaqeqa/2/
Explanation
A mousemove event is not triggered for every pixel when you move the mouse around. This means that the mouse might have left #target - before #target has been moved to match the new mouse position.
Ive got a problem here.
I want to make elements transfer their dragged event.
This means, I want to start dragging one element - and if this element reaches a point ( for example, left: 300 ) I want to hide the first element. Then I want to add a second element to the same drag event, for example an other div. So the drag will look like a single drag for the user but change its elements.
This should happen in one drag.
Anyone knows how I can make this?
An approach would be to use the drag event documented here:
http://jqueryui.com/draggable/#events
in the drag event check the left and top values and change the HTML of your helper element based on the left and top values of your drag event.
HTH
If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.