I want to drag an image according to mouse movement. The problem is whenever the drag starts, the image's top and left positions suddenly change with the mouse position.
When it starts it should not suddenly move to the mouse position. I want it to feel like normal dragging, but the position is changing whenever I start moving the mouse.
var mousedown = false;
var p;
var x=0,y=0;
var flag1 = 0;
$("#blue3").mousedown(function(){
if(mousedown) {
mousedown = false;
console.log("mouse down is true");
} else {
mousedown = true;
console.log("mouse down is true");
}
});
$("#blue3").mouseup(function(){
if(mousedown) {
mousedown = true;
console.log("mouse down is false");
} else {
flag1 = 1;
x = p.left;
y = p.top;
mousedown = false;
console.log("mouse down is false");
}
});
$("#blue3").mousemove(function(event) {
p = $("#blue3").position();
if(mousedown) {
console.log("mouse left" + event.pageX);
console.log("image left" + p.left);
console.log("mouse top" + event.pageY);
console.log("ima top" + p.top);
$("#blue3").css({"left" : event.pageX, "top" : event.pageY });
$("#blue").css({"left" : event.pageX, "top" : event.pageY});
}
});
Related
I am developing an app, and have run into a really simple but frustrating issue. Essentially I have a moving element and I want to track when it moves over the mouse. So currently, if the pointer is in the middle of the screen and not moving while the box passes over it NO event will be triggered. Is there any type of mouse or pointer event I could where it would trigger an event when the box passes over it?
Thanks. The simple code example I wrote is below:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<div id="box" style="height:300px;width:300px;background-color:green;position:absolute;top:600px;"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('onmouseover',function(e){
console.log('im being tagged!')
});
$('#box').animate({top: '1px'},3000);
</script>
</body>
</html>
The events I HAVE tried so far: onmouseover, mouseover, mouseenter, mousemove, pointerenter,pointerover
The pointer events are from a library called pep.
Since you're looking to know when the moving box element is colliding with the mouse, not vice versa, you'll want to set up a looping check for that collision. You'll need to calculate and retain the position of the mouse cursor and use document.elementFromPoint to check if the element over the cursor is the box:
$(document).ready(function() {
var MouseCoords = function(x, y) {
this.x = x;
this.y = y;
};
var mousecoords = new MouseCoords(0,0);
var isTagged = false;
$( document ).on( "mousemove", function( event ) {
mousecoords.x = event.pageX;
mousecoords.y = event.pageY;
});
$('#box').animate({top: '1px'},3000);
function isBoxOverMouse() {
var collidingElement = document.elementFromPoint(mousecoords.x, mousecoords.y);
if (collidingElement != null && collidingElement.id == "box") {
if (!isTagged) {
isTagged = true;
console.log("Tag!");
}
} else {
isTagged = false;
}
}
setInterval(isBoxOverMouse, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="height:300px;width:300px;background-color:green;position:absolute;top:600px;"></div>
I have the loop set to fire every 500ms, but that can be changed if that's not your desired frequency. I also set an isTagged variable so the console doesn't report the same collision multiple times, so feel free to remove that if you want the collision reported at every checked interval.
Adapting the code from this great answer to detect element collision
I added a function to run while the animation is in progress. Like this
$('#box').animate({
top: '1px'
}, {
duration: 5000,
// check if box overlaps cursor while animating
progress: function(promise) {
isOverlapping(this);
}
});
See the jQuery API docs for more details
$(function() {
var cursorX, cursorY = 0;
// tracks mouse position and updates its x,y coordinates
$(document).on('mousemove', function(e) {
cursorX = e.pageX;
cursorY = e.pageY;
$("#cursor").text("[X: " + e.pageX + ", Y: " + e.pageY + "]");
isOverlapping("#box");
});
// detects if two elements overlap
var overlaps = (function() {
function getPositions(elem) {
var pos, width, height;
pos = $(elem).position();
width = $(elem).width();
height = $(elem).height();
return [
[pos.left, pos.left + width],
[pos.top, pos.top + height]
];
}
function comparePositions(p1, p2) {
var r1, r2;
r1 = p1[0] < p2[0] ? p1 : p2;
r2 = p1[0] < p2[0] ? p2 : p1;
return r1[1] > r2[0] || r1[0] === r2[0];
}
return function(b) {
// making cursor 2x2 pixels
var pos1 = [
[cursorX, cursorX + 2],
[cursorY, cursorY + 2]
],
pos2 = getPositions(b);
return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
};
})();
// updates status if the box overlaps the cursor
var isOverlapping = function(elem){
if (overlaps(elem)) {
$("#boxPos").text("Overlaps");
$("#boxPos").addClass("yes");
$("#boxPos").removeClass("no");
} else {
$("#boxPos").text("No overlap");
$("#boxPos").addClass("no");
$("#boxPos").removeClass("yes");
}
}
$('#box').animate({
top: '1px'
}, {
duration: 5000,
// check if box overlaps cursor while animating
progress: function(promise) {
isOverlapping(this);
}
});
});
#cursor,
#boxPos {
float: right;
display: block;
}
.yes {
background-color: green;
}
.no {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="height:150px;width:150px;background-color:green;position:absolute;top:600px;"></div>
<div id="cursor"></div>
<br/>
<div id="boxPos"></div>
<br/>
Since you are using JQuery, you can use the mousemove event handler attached to the HTML body element. This will give you the mouse position, which you can then use to determine when the mouse is intersecting the box.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<div id="box" style="height:300px;width:300px;background-color:green;position:absolute;top:600px;"></div>
<script>
$(document).ready(function() {
var mousePos = {x:0, y:0}
$('html').mousemove(function(event) {
mousePos.x = event.clientX
mousePos.y = event.clientY
})
$('#box').animate({top: '1px'},{
duration: 3000,
step: function() {
console.log(parseInt($('#box').css('top')) <= mousePos.y)
}
});
})
</script>
</body>
</html>
How can a function, which is triggered by another function, get the mouse's position? Here's my code:
function myFunction(e){
setTimeout(function(){
if(isMouseDown == true){
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById('myElement').innerHTML = mouseX + ' , ' + mouseY;
myFunction(event);
} else {}
}, 100);
}
What this does is to display the coordinates when clicked. I need it to display them every 100ms if isMouseDown == true.
Thanks
There is no way in Javascript for a random Javascript function to get the mouse position. The current mouse position only comes from an event object for a mouse-related event. So, if you want to keep track of the mouse position, then you can register an event handler for the mousemove event and for mousedown and mouseup to keep track of the button state.
If you only want to display the mouse position, ever 100ms, then you can set a timer so that it is only displayed that often, but you will need to keep track of the current mouse position in a mousemove event handler.
Here's a simple code example:
var lastMouseX = 0, lastMouseY = 0;
document.addEventListener("mousemove", function(e) {
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
var mouseTimer;
document.addEventListener("mousedown", function() {
if (!mouseTimer) {
mouseTimer = setInterval(function() {
document.getElementById("x").innerHTML = lastMouseX;
document.getElementById("y").innerHTML = lastMouseY;
}, 100);
}
});
document.addEventListener("mouseup", function() {
clearInterval(mouseTimer);
mouseTimer = null;
});
<div id="x"></div>
<div id="y"></div>
It's a bit fuzzy what you're trying to achieve, however you're not going to get a periodic event if you're usingsetTimeout(). It sounds like you're looking for setInterval(). See the below example:
var mouseX = 0;
var mouseY = 0;
var isMouseDown = true;
document.onmousemove = function(e){
mouseX = e.pageX;
mouseY = e.pageY;
}
setInterval("myFunction()", 100);
function myFunction(){
if(isMouseDown) {
document.getElementById('myElement').innerHTML = mouseX + ' , ' + mouseY;
}
}
<div id="myElement"></div>
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.
This question already has answers here:
Moveable/draggable <div>
(9 answers)
Closed 5 years ago.
I want to create a movable/draggable div in native javascript without using jquery and libraries. Is there a tutorial or anythign?
OK, here's my personal code that I use for lightweight deployments (projects where using a library is either not allowed or overkill for some reason). First thing first, I always use this convenience function so that I can pass either an id or the actual dom element:
function get (el) {
if (typeof el == 'string') return document.getElementById(el);
return el;
}
As a bonus, get() is shorter to type than document.getElementById() and my code ends up shorter.
Second realize that what most libraries are doing is cross-browser compatibility. If all browsers behave the same the code is fairly trivial. So lets write some cross-browser functions to get mouse position:
function mouseX (e) {
if (e.pageX) {
return e.pageX;
}
if (e.clientX) {
return e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
}
return null;
}
function mouseY (e) {
if (e.pageY) {
return e.pageY;
}
if (e.clientY) {
return e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
}
return null;
}
OK, the two functions above are identical. There're certainly better ways to write them but I'm keeping it (relatively) simple for now.
Now we can write the drag and drop code. The thing I like about this code is that everything's captured in a single closure so there are no global variables or helper functions littering the browser. Also, the code separates the drag handle from the object being dragged. This is useful for creating dialog boxes etc. But if not needed, you can always assign them the same object. Anyway, here's the code:
function dragable (clickEl,dragEl) {
var p = get(clickEl);
var t = get(dragEl);
var drag = false;
offsetX = 0;
offsetY = 0;
var mousemoveTemp = null;
if (t) {
var move = function (x,y) {
t.style.left = (parseInt(t.style.left)+x) + "px";
t.style.top = (parseInt(t.style.top) +y) + "px";
}
var mouseMoveHandler = function (e) {
e = e || window.event;
if(!drag){return true};
var x = mouseX(e);
var y = mouseY(e);
if (x != offsetX || y != offsetY) {
move(x-offsetX,y-offsetY);
offsetX = x;
offsetY = y;
}
return false;
}
var start_drag = function (e) {
e = e || window.event;
offsetX=mouseX(e);
offsetY=mouseY(e);
drag=true; // basically we're using this to detect dragging
// save any previous mousemove event handler:
if (document.body.onmousemove) {
mousemoveTemp = document.body.onmousemove;
}
document.body.onmousemove = mouseMoveHandler;
return false;
}
var stop_drag = function () {
drag=false;
// restore previous mousemove event handler if necessary:
if (mousemoveTemp) {
document.body.onmousemove = mousemoveTemp;
mousemoveTemp = null;
}
return false;
}
p.onmousedown = start_drag;
p.onmouseup = stop_drag;
}
}
There is a reason for the slightly convoluted offsetX/offsetY calculations. If you notice, it's just taking the difference between mouse positions and adding them back to the position of the div being dragged. Why not just use the mouse positions? Well, if you do that the div will jump to the mouse pointer when you click on it. Which is a behavior I did not want.
You can try this
HTML
<div id="one" style="height:50px; width:50px; border:1px solid #ccc; background:red;">
</div>
Js Script for draggable div
window.onload = function(){
draggable('one');
};
var dragObj = null;
function draggable(id)
{
var obj = document.getElementById(id);
obj.style.position = "absolute";
obj.onmousedown = function(){
dragObj = obj;
}
}
document.onmouseup = function(e){
dragObj = null;
};
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
if(dragObj == null)
return;
dragObj.style.left = x +"px";
dragObj.style.top= y +"px";
};
Check this Demo
This code corrects the position of the mouse (so the dragged object doesn't jump when you start dragging) and works with touch screens/phones as well
var dragObj = null; //object to be moved
var xOffset = 0; //used to prevent dragged object jumping to mouse location
var yOffset = 0;
window.onload = function()
{
document.getElementById("menuBar").addEventListener("mousedown", startDrag, true);
document.getElementById("menuBar").addEventListener("touchstart", startDrag, true);
document.onmouseup = stopDrag;
document.ontouchend = stopDrag;
}
function startDrag(e)
/*sets offset parameters and starts listening for mouse-move*/
{
e.preventDefault();
e.stopPropagation();
dragObj = e.target;
dragObj.style.position = "absolute";
var rect = dragObj.getBoundingClientRect();
if(e.type=="mousedown")
{
xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
yOffset = e.clientY - rect.top;
window.addEventListener('mousemove', dragObject, true);
}
else if(e.type=="touchstart")
{
xOffset = e.targetTouches[0].clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
yOffset = e.targetTouches[0].clientY - rect.top;
window.addEventListener('touchmove', dragObject, true);
}
}
function dragObject(e)
/*Drag object*/
{
e.preventDefault();
e.stopPropagation();
if(dragObj == null) return; // if there is no object being dragged then do nothing
else if(e.type=="mousemove")
{
dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.clientY-yOffset +"px";
}
else if(e.type=="touchmove")
{
dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
}
}
function stopDrag(e)
/*End dragging*/
{
if(dragObj)
{
dragObj = null;
window.removeEventListener('mousemove', dragObject, true);
window.removeEventListener('touchmove', dragObject, true);
}
}
div{height:400px; width:400px; border:1px solid #ccc; background:blue; cursor: pointer;}
<div id="menuBar" >A</div>
<div draggable=true ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>
<div ondragover="return false;" ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>
How to make a element draggable without using jQuery UI?
I have this code:
<script type="text/javascript">
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
var drag=document.getElementById('drag');
drag.style.left=x;
drag.style.top=y
}
</script>
<body style="height:100%;width:100%" onmousemove="show_coords(event)">
<p id="drag" style="position:absolute">drag me</p>
</body>
The problem is that I want to drag while the user the pressing the mouse button. I tried onmousedown but results were negative.
It will be quite easy as you get the concept.
function enableDragging(ele) {
var dragging = dragging || false, //Setup a bunch of variables
x, y, Ox, Oy,
enableDragging.z = enableDragging.z || 1,
current;
ele.onmousedown = function(ev) { //When mouse is down
current = ev.target;
dragging = true; //It is dragging time
x = ev.clientX; //Get mouse X and Y and store it
y = ev.clientY; // for later use.
Ox = current.offsetLeft; //Get element's position
Oy = current.offsetTop;
current.style.zIndex = ++enableDragging.z; //z-index thing
window.onmousemove = function(ev) {
if (dragging == true) { //when it is dragging
var Sx = ev.clientX - x + Ox, //Add the difference between
Sy = ev.clientY - y + Oy; // 2 mouse position to the
current.style.top = Sy + "px"; // element.
current.style.left = Sx + "px";
return false; //Don't care about this.
}
};
window.onmouseup = function(ev) {
dragging && (dragging = false); //Mouse up, dragging done!
}
};
}
enableDragging(document.getElementById("drag")); //draggable now!
var ele = document.getElementsByTagName("div");
for(var i = 0; i < ele.length; i++){ //Every div's is draggable
enableDragging(ele[i]); // (only when its "position"
} // is set to "absolute" or
// "relative")
http://jsfiddle.net/DerekL/NWU9G/
The reason why your code is not working is because the <div> will always follow where your cursor goes, and you are not actually dragging it. The top left corner will always follow your cursor, and this is not we wanted.
UPDATE
Now if you only want a grabber or something similar, just change this part of the script:
ele.onmousedown = function(ev) {
current = ev.target;
to
var grabber = document.createElement("div");
grabber.setAttribute("class", "grabber");
ele.appendChild(grabber);
grabber.onmousedown = function(ev) {
current = ev.target.parentNode;
Now you can only click on the grabber to start the dragging process.
http://jsfiddle.net/DerekL/NWU9G/7/