I'm creating a drag and drop plugin and trying to get the handler feature to work...
I'm trying this code:
$(o.handle).mousedown(function(event) {
down = true;
var dx = event.pageX - $(this).position().left,
dy = event.pageY - $(this).position().top;
$(oj).css({
cursor: 'move',
}).mousemove(function(event) {
if (down == true) {
$(oj).css({
cursor: 'move',
left: event.pageX - dx,
top: event.pageY - dy + 110
});
}
});
o.handle is the ID of the handler
oj is referring to this
The Problem is that once you click the handler it moves the element its suppose to drag, but, then once you try to drag it again it goes all haywire. As you can see here. I don't know why it works the first time thought. But not any other time.
Related
I want to make a mobile phone theme effect on the browser, and I need to make the icon get the current mouse position when it is dragged. In order to judge whether the user wants to insert the currently dragged icon at the mouse position, but I use the event object (#drag($event) ) of the drag method in the Firefox browser to get the mouse coordinates (event. pageX, event.screenX), it shows (0,0) or a fixed value, but when I use Google Chrome, the above situation does not occur, it immediately gives me the coordinates of the current mouse. Regarding the problem of the value of layerXY in the picture, this value will only be updated once at the beginning of dragging, and will not change at the rest of the time. Since I personally like to use the Firefox browser, I want to solve this problem, can anyone help me? Or give me some other suggestions to implement this function (my English is not very good, from google translate)
You could update the mouse coordinate on a global variable when the mouse moves so that it will be ready for you when mouse is down.
let drag = document.querySelector('.note');
var pageX, pageY
drag.onmousedown = function(e) {
let coord = getCoord(drag);
let shiftX = pageX - coord.left;
let shiftY = pageY - coord.top;
drag.style.position = 'absolute';
document.body.appendChild(drag);
moveNote(e);
drag.style.zIndex = 1000;
function moveNote(e) {
drag.style.left = pageX - shiftX + 'px';
drag.style.top = pageY - shiftY + 'px';
var position = {
x: drag.style.left,
y: drag.style.top
}
}
document.onmousemove = function(e) {
moveNote(e);
};
drag.onmouseup = function() {
document.onmousemove = null;
drag.onmouseup = null;
};
}
function getCoord(elem) {
let main = elem.getBoundingClientRect();
return {
top: main.top,
left: main.left
};
}
window.onload = function() {
document.addEventListener("mousemove", function(e) {
pageX = e.pageX
pageY = e.pageY
});
drag.style.position = 'absolute';
document.body.appendChild(drag);
drag.style.display = 'block'
}
.note {
width: 50px;
height: 50px;
background: red;
display: none;
}
<div class="note"></div>
Can someone tell me how to show position on mouse click. I am not asking for on click show div position... I am asking for this if I have :
<div id="div123" style="width: 300px; height: 300px;"></div>
And jquery :
$("#div123").click(function(){
var x = $("WHERE MOUSE CLICKED INSIDE #div123").position();
});
I have not tried, but this should work
$('#div123').click(function(e) {
var posX = $(this).position().left
var posY = $(this).position().top;
alert( (e.pageX - posX) + ' , ' + (e.pageY - posY));
});
You need to process the event object in the function.
$("#div123").click(function(e){
e.pageX;
e.pageY;
});
event.pageX
The mouse position relative to the left edge of the document.
event.pageY
The mouse position relative to the top edge of the document.
check the doc:
https://api.jquery.com/category/events/event-object/
I need to show a div on mouseover/hover on top of a button and the div which is shown should be able to clickble and persistent even if I move out of button into the div that is shown. but this should be hidden when we move out of the whole area.
I am not sure how to achieve this.
var mouseX;
var mouseY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".circle-button-small").hover(function () {
mouseX = mouseX;
mouseY = mouseY - 100;
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
});
$(".circle-button-small").mouseout(function () {
if ($(".theme-hover").mouseenter()) {
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
} else {
$('.theme-hover').hide('slow');
}
});
Update
$(".circle-button-small").hover(
function () {
mouseX = mouseX;
mouseY = mouseY - 100;
$('.theme-hover').css({
'top': mouseY,
'left': mouseX
}).show('slow');
},
function () {
$('.theme-hover').hide('slow');
}
);
http://jsfiddle.net/u2oj799u/6/
Update:
solution posted by jbyrne2007 was helpful but that is a workaround. I need something like the one mentioned in comments below,
When I hover I need the "theme-hover" to appear near the mouse pointer, and also when I exit circle-button, if not into the "theme-hover", "theme-hover" should be hidden, else if I enter "theme-hover" it should be still visible... the solution above is like a work around..
Im a little unclear as to what your end result should be but take a look at
this jsfiddle
$(".main-area").mouseleave(function () {
$('.theme-hover').hide('slow');
});
I've moved the div .theme-hover inside the .main-area so when you move over to click it wont disappear.
I also added this to the style of .theme-hover
cursor:pointer;
makes it a little more user friendly.
Again I assumed you wanted the div with "Hey" in to appear when you click so I put the click in there as well.
$(".theme-hover").click(function () {
$('.overlay').toggle();
});
I'm implementing drag and drop with jQuery.
So, after mousedown, event starts working:
On mousemove selected element moves with mouse.
Now, I want it to stop working on mouseup.
here's my code:
$(document).on("mousemove", widget, function() {
var newMouseX = event.pageX - mouseX;
var newMouseY = event.pageY - mouseY;
var newElemX = elemX + newMouseX;
var newElemY = elemY + newMouseY;
$(widget).offset({ top: newElemY , left: newElemX });
$(document).on("mouseup", widget, function(widget) {
// what to do here?
});
});
any suggestions?
How to get a mouse position inside open function of jQuery Dialog?
tried google?
$('#mydialog').mousemove(function(e){
var offset = $('#mydialog').offset()
// e.pageX - offset.left
// e.pageY - offset.top
});
Edit re: comment
afaik the mouse coordinates are only available on mousemove. You will need to use something like $('html').mousemove to constantly capture the coords to global vars, then do something with them on open
$("#dialog").dialog({
open: function(event, ui)
{
var offset = $('#mydialog').offset();
var P_LX = e.pageX - offset.left
var P_TY = e.pageY - offset.top
}
});