Is it possible to switch the object being dragged to another object on clicking the first object?
Problem: In the jsfiddle below, when the red circle is dragged, it changes into a blue rectangle but does not respond to the initial drag. A 2nd drag has to be made on the blue rectangle to drag it.
Desired: It should change from red circle to blue rectangle and the blue rectangle should immediately follow the dragging motion smoothly.
Attempt: I tried to .simulate() the events but it does not seem to work. Any ideas?
circle.on('dragmove', function(e) {
circle.simulate('click'); // used click handler to change into a blue rectange
circle.simulate('dragend'); // (FAILED) stop dragging red circle
rectangle.simulate('dragmove'); // (FAILED) start dragging blue rectangle
});
JSFIDDLE: http://jsfiddle.net/M6ufm/
http://jsfiddle.net/M6ufm/3/
I updated this for you.
Essentially, you were removing the circle and then simulating an event on it, then simulating an event on the rectangle.
// Show BLUE rectangle on clicking RED circle, Hide RED circle, start dragging rectangle
circle.on('dragstart mousedown', function(e) {
layer.add(rectangle);
circle.remove();
rectangle.simulate('mousedown');
rectangle.simulate('dragstart');
});
Related
I am trying to register all mouse movements in red (bottom layer) and blue (upper layers) areas. Is there a way to add a Listener only to the red area? Because now I use this code:
red = document.querySelector('.red')
blue = document.querySelector('.blue')
red.addEventListener('mousemove', parallax);
blue.addEventListener('mousemove', parallax);
(And not using common additional class, just adding a Listener to one component.)
I am trying to tween the color of a Kinetic.Rect when the mouse moves over it. I also have a piece of text defined at the same location. It seems that adding padding to a Kinetic.Text interferes with mouseover events.
I have created a fiddle at http://jsfiddle.net/d5pbK/
I have two padding statements one at line 40 and one at line 45.
The way the fiddle is right now when I move the mouse in the blue rectangle its changes color but if you move the mouse over the horizontal text extents then the rectangle does NOT change color.
Also if you activate any of the padding statements then only when I place the mouse over the orange border, only then does the rectangle change colors.
I would like the rectangle to change colors when the mouse is over it irrespectively of the text.
The Kinetic.Text element takes up the same space as the Kinetic.Rect element when padding is added to the text.
So instead of adding the events to the Kinetic.Rect, add them to the Kinetic.Text
Updated fiddle at: http://jsfiddle.net/MZ57d/
I have a ESRI map that has 11 polylines on it. I would like it so that when a user mouses over a line, the line changes a different color and changes to a bigger width. When a user mouses off the line, the line will go back to it's original color and width. All these lines are on the same layer (var reaches).
I have the code that detects when a user mousesover or mouseout of a line:
dojo.connect(reaches, "onMouseOver", function(evt)
{ });
dojo.connect(reaches, "onMouseOut", function()
{ });
They correctly detect when the mouse in over a line and when the mouse is off a line. The way I have these 2 function, they detect when the mouse is over any line in the reaches layer. I would like the onMouseOver function to know which line was moused over and change the color and the width of the line. How do I do this?
I would like the onMouseOver function to know which line was moused
over
The evt parameter given to your event handler function should have a .graphic property, which contains the geometry of the feature you're hovering over.
and change the color and the width of the line
You can't do this directly on the feature without playing with its field values, but you can add a new feature to the map.graphics layer to serve as the highlighted feature. There's a good example on ESRI's forums:
dojo.connect(pdaGraphicsLayer, "onMouseOver", function(evt) {
map.graphics.clear();
var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
});
How do I drag the background image and change its position? Like when you change the position of your cover photo on facebook.
I've searched everywhere but can't find the right one.
On mousedown, log the current mouse position. Create a mask, and on that mask:
On mousemove, get the current mouse position and subtract it from the original mouse position. Move the background accordingly
On mouseup, remove the mask and save the new position.
You can try with this jQuery plugin, and is as easy as:
element.backgroundDraggable()
Here you have a demo
I have a circle on layer1 and then a square on layer2. The circle diameter is the square's width, their centers are the same, and the circle is on top of the square. How do I set things up such that if I trigger any event on layer1 the same even will be executed at the same location in layer2. So in this case if I click on the circle, the square's click event will also be triggered. Of course, this doesn't mean I simply want to hook up the circle's events to the square's, but rather I basically want the events to be triggered on both layers.
So for example if
circle.on( "click", function() {
alert("foo");
});
square.on( "click", function() {
alert("bar");
});
then clicking on the center of circle should trigger the square click event.
And NOT by
circle.on( "click", function() {
alert("foo");
square.simulate("click"); // don't want this
});
How about adding the circle and square to a group, and then attatch the click-event to the group instead?
Kinetic has two things that can help you.
getIntersections() -- returns all shapes under the mouse click point
fire() -- fires an event
The Kinetic docs mention the getIntersections() performs slowly, so they prefer getIntersection(), but I have never used either, so I can't say how much.
http://kineticjs.com/docs/Kinetic.Stage.html#getIntersection
Hope this helps.