Windows "disallowed" icon appears when dragging element - javascript

I am creating a fairly simple slider using jQuery. To do this i am using the mousedown, mousemove and mouseup events.
var pageX;
$handle.bind('mousedown',function(a){
pageX = a.pageX;
$handle.bind('mousemove',function(e){
e.preventDefault();
var delta = pageX - e.pageX;
pageX = e.pageX;
var left = $handle.position().left;
$handle.css({left:(left-delta)+'px'});
});
});
$handle.bind('mouseup',function(){
$handle.unbind('mousemove');
});
Now, this actually works great, except for that when i drag the handle to fast, the "block" icon appears (you know, the circle with a cross over it). How can i prevent that from happening?

i was able to fix it by preventing default behavior of the mousedown event
$handle.bind('mousedown', function(a) {
a.preventDefault()
// ...
}

You can just manually set the cursor to anything: http://www.echoecho.com/csscursors.htm
In this example you would use:
.css('cursor','default');
Hope that helps.

Related

Can we make ol.Overlay draggable on OpenLayers 3?

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!

Mobile Phone Touch Event

I want to create a slider. Here is my javascript code:
<div id="ghgh" style='width:50px;height:50px;position:absolute;top:0;left:0;background:#000'>
</div>
<script type="text/javascript">
$(document).bind('mousemove',function(ev){
$('#ghgh').offset({left:(ev.pageX-25)});});
</script>
This, however, only works in computers but not touch screen. I have tried to use events like touchmove,slide,scroll,etc. yet none of them works. What events should I use in order to make it work in touch screens?
First of all: put your styles and scripts in separate files.
For touch events, you may have a look at hammer.js
Example from their website:
Hammer(el).on("swipeleft", function() {
alert('you swiped left!');
});
EDIT: more specific example:
Hammer(document.body).on('drag', function (event) {
var gesture = event.gesture,
pageX = gesture.center.pageX,
pageY = gesture.center.pageY,
deltaX = gesture.deltaX,
deltaY = gesture.deltaY;
// console.log(event); Uncomment this to see all properties of the event object in your webinspector console
});

How do i get the mouse position of the location i clicked, on a kinetic.js Stage?

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);
});

How to grab and drag an element around a circle?

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...)

IE9 Forward mouse events through a masking canvas element

My absolutely positioned canvas elements are blocking all the mouse events so that nothing underneath them can be clicked, same problem mentioned here and here.
I have multiple canvas layers that need to be at specific z-index's so I need to forward mouse events through the canvases. pointer-events: none; works in good browsers, but for IE9 I need javascript to do it, here is my current solution,
var evts = [ 'click', 'mousedown', 'mouseup', 'dblclick'],
canvases = $('canvas');
$.each(evts, function(_, event){
canvases.bind(event, function(evt){
var target,
pEvent;
$(this).hide();
target = document.elementFromPoint(evt.clientX, evt.clientY);
$(this).show();
pEvent = $.Event(event);
pEvent.target = target;
pEvent.data = evt.data;
pEvent.currentTarget = target;
pEvent.pageX = evt.pageX;
pEvent.pageY = evt.pageY;
pEvent.result = evt.result;
pEvent.timeStamp = evt.timeStamp;
pEvent.which = evt.which;
$(target).trigger(event, pEvent);
});
});
Working example,
jsFiddle
Questions;
1. I'm creating the new event and passing over the relevant data, would it be safe to pass the evt var with the target and currentTarget modified?
2. How can I propogate a right click?
Or does anyone have a better way to accomplish this? The other related questions are quite old.
There's no clean way to pass the events cross-browser. You can pass the (modified) event on but you can't guarantee that it will work as it might have naturally, especially cross-browser.
For right click using your code just do this: http://jsfiddle.net/6WMXh/20/
(you half used the jquery extra info part but never did anything with it)

Categories