We Keep Coding

On Javascript or JQuery, while running add/remove mousemove event

I need the location when I first click on the screen.I did this. But i need more.
The mousemove event will also run when the mousedown event runs. mousemove event will not work when mouseup event runs
$("#canvas").mousedown(function (e) {
console.log("First: down position: " + e.pageX + "---" + e.pageY);
canvasMove("canvas");
});
$("#canvas").mouseup(function (e) {
console.log("Last: up position: " + e.pageX + "---" + e.pageY);
});
function canvasMove(id) {
$(id).mousemove(function (e) {
console.log("move position: " + e.pageX + "---" + e.pageY);
});
}
So how do I remove the mousemove event in the mouseup event?

$("#canvas").off('mousemove')
If you have something else listening to the mouse you can attach your handler with a namespaced event like
$("#canvas").on('mousemove.loggingPosition')
and then remove it
$("#canvas").off('mousemove.loggingPosition')

You can do something like this using on and off methods:
function canvasMove(id) {
$(id).on("mouseup",function (e) {
$( this ).off("mousemove");
console.log("move position: " + e.pageX + "---" + e.pageY);
});
}
For more info visit here

Javascript/jQuery Drag and Drop Limit parent

got the following problem. i need the following just to be drag/dropable in the green area.
should be something like that:
limit($(this).parent());
but thats not working, im using this for dnd:
$('#dragThis').draggable({
drag: function () {
var offset = $(this).offset();
var xPos = Math.abs(offset.left);
var yPos = Math.abs(offset.top);
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
},
stop: function (event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Math.abs(Stoppos.left);
var top = Math.abs(Stoppos.top);
$('#posX').val('x: ' + left);
$('#posY').val('y: ' + top);
}
});
hope someone can help me with that ;) thx so far
http://jsfiddle.net/DGbT3/1850/
///////////////
Update - getting correct x/y Position and just allow inside green area:
http://jsfiddle.net/DGbT3/1858/

You can use containment option for this which constrains dragging to within the bounds of the specified element or region.:
$('#dragThis').draggable({
drag: function() {
var offset = $(this).offset();
var xPos = Math.abs(offset.left);
var yPos = Math.abs(offset.top);
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Math.abs(Stoppos.left);
var top = Math.abs(Stoppos.top);
$('#posX').val('x: ' + left);
$('#posY').val('y: ' + top);
$('#info').val('x: ' + left + ' y: ' + top);
},
containment: $("#content")
});
Example

If you want to get the position according to its parent then use .position(), then check if the xPos and yPos are bigger than 0 and smaller that its parent's width..
$('#dragThis').draggable({
drag: function() {
var offset = $(this).position();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
if(xPos < 0 || xPos > $(this).parent().width())
console.log("outside");
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
var left = Stoppos.left;
var top = Stoppos.top;
$('#posX').val('left: ' + left);
$('#posY').val('top: ' + top);
if(xPos < 0 || xPos > $(this).parent().width())
console.log("outside");
}
});
NOTE: there is a typo in your #content css position..

Having issues with mousemove and images in Jquery

How can I make the other images also follow the mouse? Not all at the same time, but when I click on the selected image.
How can I calculate the distance where the mouse moved when I click on the image?
See link below.
HTML:
<div id="squarelocation"></div>
<div class="square 1">1</div>
<div class="square 2">2</div>
<div class="square 3">3</div>
Jquery:
$(document).ready(function () {
var i = true;
$(document).on('click', function () {
$(this)[i ? 'on' : 'off']('mousemove', follow);
i = !i;
});
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$(".2").offset({
left: e.pageX,
top: e.pageY
});
}
});

I suggest you to bind a click event to the square class like this:
var clickedImage;
$('.square').click(function (e){
initialX = e.pageX;
initialY = e.pageY;
clickedImage = this;
});
and assign the context to a variable, so that you can refer to it whenever you needed. And then in your code, refer to that context instead of the hardcoded '.2':
$(clickedImage).offset({
left: e.pageX,
top: e.pageY
});
This way, the image clicked will be referred to, instead of just '2' following the mouse all the time.
Same for calculating the distance between the clicked origin and the current position, you can save the original spot on clicking the image:
var initialX;
var initialY;
$('.square').click(function (e){
initialX = e.pageX;
initialY = e.pageY;
clickedImage = this;
});
and do the calculation in the 'follow' function, of course how the calculation should be is up to you, but here is an example:
var distanceX = xPos - initialX;
var distanceY = yPos - initialY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$('#squaredistance').html("Distance from origin: " + distanceX + ", " + distanceY);
Hope this help. jsfiddle: http://jsfiddle.net/FW9jV/1/

You could add an 'active' class for the active square. I added an example.
The active square will always be moving until you click to deactivate it.
http://jsfiddle.net/fG6kr/1/
$(document).ready(function () {
var i = true;
$('.square').on('click', function () {
if( $(this).hasClass("active"))
{
$(this).removeClass("active");
$(document).off('mousemove');
}
else
{
$(this).addClass("active");
$(document).on('mousemove', follow);
}
});
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
$('.active').offset({
left: e.pageX,
top: e.pageY
});
}
});

demo
$(function() {
$('.square').click(function(){
$(this).toggleClass('sel');
});
$(document).on('mousemove', function(e){
$(".sel").offset({left: e.pageX+10, top: e.pageY+10});
});
});

Find if the mouse position changed during mousedown

I have a text that when I long press the mouse button (700 ms), I will activate an text editor over that text. During this time (when the mouse is pressed) I have to check if the mouse position has moved. The problem is, that I only have one event, mouse down pressed event.
How do I found out if the mouse has been moved?
I have tried to take a new event but I am a beginner to jquery so I couldn't achieve what I wanted to.
this is the function where i get the event.
onTaskItemMouseDown: function (event) {
// We only check the left click
if (event.button !== 0) { return true; }
var that = this,
initialX = event.pageX,
initialY = event.pageY;
// Set timeout
console.log("x=" + initialX);
console.log("y=" + initialY);
this.pressTimer = window.setTimeout(function () {
clearTimeout(that.pressTimer);
that.pressTimer = 0;
that.onEditTask(event, that.$(event.currentTarget).closest(".task").find(".dropdown-container").data("task-id"));
}, MindomoUtils.longClickDuration);
return true;
},

You probably are looking for mousemove event.
I can see you already using jQuery so here is an example for you.
HTML for output
<ul class="output"></ul>
jQuery
$(document).on('mousedown', onMouseDown)
$(document).on('mousemove', onMouseMove)
$(document).on('mouseup', onMouseUp)
var mouseIsDown = false
function onMouseDown(event) {
// set boolean true
mouseIsDown = true
$('.output').append($('<li>').text('Mouse down - x: ' + event.pageX + ' y: ' + event.pageY))
}
function onMouseMove(event) {
if(mouseIsDown) {
$('.output').append($('<li>').text('Mouse moving - x: ' + event.pageX + ' y: ' + event.pageY))
}
}
function onMouseUp(event) {
// set boolean false again
mouseIsDown = false
$('.output').append($('<li>').text('Mouse up - x: ' + event.pageX + ' y: ' + event.pageY))
}
Here you can play with it yourself.

Getting mouse position in keyboard event

I'm trying to have a selection wheel appear when the user holds down the Shift key.
The wheel should be centred on the mouse's position.
However when I test this, pageX and clientX are both undefined on the event object.
Is it possible to get the mouse coordinates on a keyboard event?

No, simply track mousemove events and continuously save the current position in case you get a keyboard event.

Cache mouse position in a global variable in every mousemove event and use it when a key event fires:
var mousePosition = {x:0, y:0};
$(document).bind('mousemove',function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
});
$(document).bind('keyup', function(keyUpEvent){
$('body').append($('<p/>').text('x:' + mousePosition.x + ' * y: ' + mousePosition.y));
});
JSBIN: http://jsbin.com/uxecuj/4
JavaScript without jQuery:
var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
}, false);
document.addEventListener('keyup', function(keyUpEvent){
var divLog = document.querySelector('#log'),
log = 'x:' + mousePosition.x + ' * y: ' + mousePosition.y,
p = document.createElement('p').innerHTM = log;
divLog.appendChild(p);
}, false);

Here's the POJS equivalent of other answers that is cross browser back to IE 6 (and probably IE 5 but I don't have it to test any more). No global variables even:
function addEvent(el, evt, fn) {
if (el.addEventListener) {
el.addEventListener(evt, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, fn);
}
}
(function () {
var x, y;
window.onload = function() {
addEvent(document.body, 'mousemove', function(e) {
// Support IE event model
e = e || window.event;
x = e.pageX || e.clientX;
y = e.pageY || e.clientY;
});
// Show coords, assume element with id "d0" exists
addEvent(document.body, 'keypress', function() {
document.getElementById('d0').innerHTML = x + ',' + y;
});
}
}());
But there are bigger issues. Key events are only dispatched if an element that can receive keyboard input is focused (input, textarea, and so on). Also, if the user scrolls the screen without moving the mouse, the coordinates will probably be wrong.
An alternative solution is to use CSS to replace the cursor with a custom animation.

If you're using jQuery, you can do the following (assuming you have an image with id="wheelImage" and whose position is set to absolute), write the following inside your keydown event. Here we use the global properties pageX and pageY that are passed to any handler. You can also use jQuery's shiftKey property to check if the shift key has been pressed.
$().keydown(function(e) {
if (e.shiftKey) {
e.preventDefault();
$('#wheelImage').css('left',e.pageX ).css('top', e.pageY);
}
});

Cache the mouse position.
var x = 0, y = 0;
document.addEventListener('mousemove', function(e){
x = e.pageX
y = e.pageY;
}, false);
document.addEventListener('keyup', function(e){
console.log(x + ' ' + y);
}, false);
Or with JS Ninja Library.
var x = 0, y = 0;
$(document).mousemove(function(e){
x = e.pageX
y = e.pageY;
});
$(document).keypressed(function() {
console.log(x + ' ' + y);
});