So far I have a circle with a marker.
http://jsfiddle.net/x5APH/1/
I would like to grab and drag the marker around the circle, however the current functionality only nudges the marker when you click it.
What changes can I make to the code so that the marker can be dragged around the circle while the mouse is held down?
Note
If you could update the fiddle with your solution I would greatly appreciate it.
changed some code
$(document).ready(function(){
$('#marker').on('mousedown', function(){
$('body').on('mousemove', function(event){
rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));
});
});
});
also add this code
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
in the function
this is the jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/
To do anything of this sort:
On mousedown on the desired element, set:
mousemove event on the document to update the position of the target
mouseup event on the document to remove the mousemove and mouseup events you just set.
Example in plain JS:
elem.onmousedown = function() {
document.body.onmousemove = function(e) {
e = e || window.event;
// do stuff with e
};
document.body.onmouseup = function() {
document.body.onmousemove = document.body.onmouseup = null;
};
};
Personally I like to improve this further by creating a "mask" element over the whole page to capture events, so that (for example) dragging a selection or image does not trigger default browser actions (which are strangely immune to all event cancelling methods in this case...)
Related
How to handle mouseover event with this textarea resize sign?:
The easiest solution is to check if the cursor is in a small area in the right-bottom corner. But maybe there's another solution?
you can add the code that you want to execute when the mouseover event occurs. For example, you could change the cursor to a resize cursor to indicate that the element can be resized:
const resizeSign = document.querySelector('.resize-sign');
resizeSign.addEventListener('mouseover', () => {
document.body.style.cursor = 'resize';
});
resizeSign.addEventListener('mouseout', () => {
document.body.style.cursor = 'default';
});
Resize event for textarea?
Since you didn't post what exactly you're trying to do here. Check the link you might get answers
I have an issue with mousemove (and any kind of other mouse events) and a child iframe.
When i click on iframe and then drag mouse over the main frame, mousemove event of main frame simply does not fires.
I've tried to bubble events to the parent (but this way i can't get event.target)
I've tried to use HTML5 DND but there is a problem with performance. It works well, but generates strange HitTests (in chrome).
Ideally i want to make it with mousedown+mousemove.
I've made a simple demo of this problem here
var frame = document.getElementById("frame");
var frameBody = frame.contentDocument.documentElement.getElementsByTagName("body")[0];
frameBody.innerHTML = "CLICK HERE AND DRAG OVER THE BOXES TO SEE THE PROBLEM. Why parent's listener makes nothing?";
frame.contentDocument.addEventListener("mousedown", function(e) {
console.log("frame mousedown");
})
document.addEventListener("mousemove", function(event) {
// I need it working here with all event properties like event.target of the main fame
console.log("main move");
var resultBox = document.getElementById("result");
if (event.target.id) resultBox.innerHTML = event.target.id;
})
This solves the problem.
http://jsfiddle.net/xr1f03do/33/
frame.contentDocument.addEventListener("mousedown", function(e) {
e.preventDefault();
console.log("frame mousedown");
})
I am trying to make that an ol.overlay is draggable, but I am not able to do it. I have found this example (http://openlayers.org/en/v3.2.1/examples/drag-features.html?q=drag), but it is done using ol.Features and what I need is an overlay, since I can use a custom -html div- for showing what I need. I have also found a very interesting example that is able to do what I want, but it is done using google maps v3 and I need it for ol3.
Thanks in advance.
You can simply register a 'mousedown' event listener on the overlay's div. Inside that listener, register 'mousemove' and 'mouseup' events on the window. To update the position on 'mousemove', use the ol.Map#getEventPixel() method, which takes the 'mousemove' event as argument. On 'mouseup', you just unregister the window listeners.
marker_el.addEventListener('mousedown', function(evt) {
function move(evt) {
marker.setPosition(map.getEventCoordinate(evt));
}
function end(evt) {
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', end);
}
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', end);
});
See http://jsfiddle.net/rnzgfg89/6/ for a working example.
UPDATE:
There's no need of this ol.Map.prototype.forEachOverlayAtPixel method (see https://github.com/openlayers/ol3/issues/5760).
Just register a mousedown listener on the DOM overlay element and you're good to go. Fiddle updated.
ol.Overlay is a poor type in OL3 but with some work, yes, you can achieve it. ol.Feature is the all-powerful and if you really need ol.Overlay I came up this demo fiddle.
The idea is:
Listen for pointerdown map event and check if there's a overlay at the clicked pixel;
ol.Map.prototype.forEachOverlayAtPixel - just created for question
Deactivate ol.interaction.DragPan - map panning;
Listen for pointermove and set the overlay position;
Listen for pointerup and restore ol.interaction.DragPan;
Thought I'd add a little bit to the discussion. I loved Jonatas' solution, but if the overlay isn't tiny, it jumps a little unless you click exactly in the center of the overlay, so I've improved his solution somewhat by finding the distance between the click and the current position of the overlay element. Then when setting the position these distances are used so that the mouse position on the overlay doesn't change as you drag the overlay.
let deltaX, deltaY
const getAdjustedCoords = coordinate => {
const resultCoord = [coordinate[0] - deltaX, coordinate[1] - deltaY]
return resultCoord
}
marker_el.addEventListener('mousedown', function(evt) {
dragPan.setActive(false);
let markerpos = marker.getPosition();
let clickPixel = [evt.x, evt.y]
let clickCoords = map.getCoordinateFromPixel(clickPixel)
deltaX = clickCoords[0] - markerpos[0]
deltaY = clickCoords[1] - markerpos[1]
marker.set('dragging', true);
console.info('start dragging');
});
map.on('pointermove', function(evt) {
if (marker.get('dragging') === true) {
marker.setPosition(getAdjustedCoords(evt.coordinate));
}
});
map.on('pointerup', function(evt) {
if (marker.get('dragging') === true) {
console.info('stop dragging');
dragPan.setActive(true);
marker.set('dragging', false);
}
});
Here's my fiddle: https://jsfiddle.net/sxc24re8/
Cheers!
I have a PanoJS3 component taking the whole screen and a KineticJS stage over that. How can I make the touch events fall through KineticJS stage to what is underneath?
I'd like for any shape placed on the stage/layer to capture the events, but clicking around the transparent background should allow me to interact with the component below.
You have to catch the event and trigger the SAME event on the 'underneath' element.
I made a fiddle (http://jsfiddle.net/Q5HtP/) for you, keypart:
var stage = document.getElementById('stage');
var pano = document.getElementById('pano');
pano.onclick = function(e) {
var event = new MouseEvent('click', e);
stage.dispatchEvent(event);
};
stage.onclick = function(e) {
console.log(e);
alert('click');
};
I am new to KineticJS and am not being able to get the mouse coordinates of the Stage on mousedown. I managed to display the coordinates with mouseout and mouseover but mousedown seems only to work on the image/shape that has been added to the Stage, but not the Stage itself.
Can anyone explain to me why is it so? and help me with a solution please.
this is the example I tried with:
Code:
stage.on('mouseout', function() {
var mousePos = stage.getMousePosition();
writeMessage(messageLayer, 'Mouseout triangle:' + mousePos.x);
});
stage.on('mouseout','mousemove', function() {
});
stage.on('mousedown', function() {
alert('OK!');
});
jQuery event listener functions have event params passed in that contain all the information you'll ever need. In this case, you'll maybe want offsetX and offsetY.
$('body').click(function (e) {
console.log(e.offsetX, e.offsetY);
});