Append div based on dragend mouse coordinates - javascript

I want to append div based on dragend event coordinates. This is what I have tried:
$(document).ready(function () {
var mouseX;
var mouseY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
var i =1;
$(".ic_table").on("dragend", function (e, ui)
{
console.log(mouseX + " " + mouseY);
var editName = "Edit Name";
$('#datamodelArea').append('<div id="divDT' + i++ + '" class="dataModelTable ui-draggable ui-draggable-handle style="left:' + mouseX + 'px' + '; top:' + mouseY + 'px' + ';"><div class="dataTableName">' + editName + '</div><div class="widget"><div class="widget-head"> <i></i> Attributes <div class="widget-body attributesBody" id="widget-body1"></div></div></div><div class="widget-body attributesBody" id="widget-body1"><ul></ul></div></div>');
$('.form-control').val('');
});
});
Html:
<body>
<div id="datamodelArea"></div>
<button class="ic_table" draggable="true">Submit</button>
</body>
Its appending only to top:0px and left:0px even though the mouse coordinates are different on dragend

Set your position properties explicitly to relative for the container and absolute for the dropped.

Related

X and Y coordinates not correct if the div doesn't fit on the screen

I am trying to retrieve the X and Y coordinates from a div. My div doesn't fit on the screen and if I use the slide bar to click on the bottom of the screen the coordinates are not correct. How can I fix that
$(function () {
$("#overlayDiv").click(function (e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
<div id="pdfDiv">
<div id ="overlayDiv"></div>
<iframe class="iFrameClass" id="pdfForm" src="{{pdfFile}}" width="940" height="1260"></iframe>
</div>

JS offsetX and offsetY flickers between new position and original

The desired result that I'm looking for is for the red square to follow the mouse smoothly, and not flicker back to the original position. Basically, I want to click the red square, drag it to an area, and then release to have that be the new location. Why is it flickering, and how can I achieve a simple drag and follow?
html
<div style="height:500px; width:500px; background-color:#ccc;">
<div id="custom-front" style="width:100%; height:100%;">
<div id="custom-content" style="z-index:200; position:absolute; text-align:center; background-color:red; width:50px; height:50px;">
</div>
</div>
js
window.onload = addListeners();
function addListeners(){
document.getElementById('custom-content').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
document.getElementById('custom-content').style.top = e.offsetY + 'px';
document.getElementById('custom-content').style.left = e.offsetX + 'px';
}
https://jsfiddle.net/703kc43a/1/
i have just changed your javascript code, may be this help you, check this....
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(event.dx * event.dx +
event.dy * event.dy)|0) + 'px');
}
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing demo
window.dragMoveListener = dragMoveListener;
<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
<div style="height:500px; width:500px; background-color:#ccc;">
<div id="custom-front" style="width:100%; height:100%;">
<div id="custom-content" class="draggable" style="z-index:5; position:absolute; text-align:center; background-color:red; width:50px; height:50px;">
</div>
</div>
</div>

Issue with a mouse wiggle effects

I have written this code to display a small panel when the mouse is over the regions, but I ended up with a terrible "wiggle" effect when I insert an image. How can i fix that?
Have a look at my codepen. Relevant excerpt:
$('.italia g').mouseover(function (e) {
var region_data = $(this).data('region');
$('<div class="info_panel">' +
'<img src=" ' + region_data.region_image + ' " >' +
'</div>'
).appendTo('body');
})
.mouseleave(function () {
$('.info_panel').remove();
})
.mousemove(function(e) {
var mouseX = e.pageX, //X coordinates of mouse
mouseY = e.pageY; //Y coordinates of mouse
$('.info_panel').css({
top: mouseY - 100,
left: mouseX - (($('.info_panel').width()/2)+175)
});
});
The issue is that the info window is right below your cursor when hovering an area.
As soon as the infowindow appears, the mouse is triggering the mouseleave event, as it is now hovering the area AND the infowindow, which is above the area.
Check using this:
$('.info_panel').css({
top: mouseY - 100,
left: mouseX - (($('.info_panel').width()/2)+175)
});
No wiggle effect anymore.

Javascript ondragend don't get the right coordinates

I am learning the html drag-and-drop methods. However, something is wrong when i want to make a div draggable, and change its position when i "drop" it.
I get the position of the cursor using e.screenX and e.screenY when I drag and drop it. However, I think that when I "drop" it, the coordinates changes comparing to the last coordinates when I was "dragging" it.
It works fine on Chrome and IE on PC running Windows 7; but the situation happens on both Safari and Chrome on my Mac, IE and Chrome on virtual machine running Windows 8.1. I am totally confused.
Thanks in advance. Here is my code.
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="drag-1" class="drag module" draggable="true">
<div class="module-header">Draggable Div</div>
<div class="module-content">
<p>This is draggable.</p>
</div>
</div>
<script>
var draggable_div = document.getElementById("drag-1");
var startPos = {};
draggable_div.ondragstart = function(e){
// e.dataTransfer.setData("_", "");
console.log("start: " + e.offsetX + ", " + e.offsetY);
startPos = {
left: draggable_div.offsetLeft,
top: draggable_div.offsetTop,
offsetX: e.offsetX,
offsetY: e.offsetY
}
console.log( startPos );
}
draggable_div.ondrag = function(e){
// console.log("drag.. " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = startPos.top + e.offsetY - startPos.offsetY + "px";
draggable_div.style.left = startPos.left + e.offsetX - startPos.offsetX + "px";
//
}
draggable_div.ondragend = function(e){
// console.log("drop: " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = parseInt(startPos.top + e.offsetY - startPos.offsetY) + "px";
draggable_div.style.left = parseInt(startPos.left + e.offsetX - startPos.offsetX) + "px";
// console.log( startPos );
}
</script>
</body>
</html>

How to bind mousemove scroll and resize all into one function

Currently, I "do stuff" when the mouse moves. However, I also want to do the exact same thing if the user resizes the browser or scrolls down the browser.
jQuery(document).bind('mousemove',function(e){
var x, y;
x = e.pageX; // x coord
y = e.pageY; // y coord
//other stuff
});
I tried putting doing
jQuery(document).bind('mousemove resize scroll',function(e){...
but it didn't work. I also tried
jQuery(document, window).bind('mousemove resize scroll',function(e){...
but it also didn't work.
I also know that you can detect scroll using
$(window).scroll(function(){
and detect resize using
$(window).resize(function() {
But the if I use those detections, I won't have the "e" argument to get the x and y coordinates of the mouse
How do I bind all 3 events all into one function?
Thanks
You do still have the event data in the scroll and resize methods. Try wrapping your code into a single function with 3 handlers. The on() method requires jQuery 1.7+
function reusable(eData){
// Heres what you want to do every time
}
$(document).on({
mousemove: function(e) { reusable(e); },
scroll : function(e) { reusable(e); }
);
$(window).on({
resize : function(e) { reusable(e); }
});
edited
The events should be in their correct objects window and document or you will get unexpected values.
from your comment:
the problem is that e.pageX is undefined when the resize or scroll event is activated and that is breaking my application
So why are you using the current object properties when you know they are undefined? Why not use a global variable and hold in them the last value?
Live example in JsBin
var clientX = 0, clientY = 0,
screenX = 0, screenY = 0,
pageX = 0, pageY = 0;
// bind the events in the correct objects
jQuery(window).bind('resize',function(e) { getBindingValues(e); });
jQuery(document).bind('mousemove scroll',function(e) { getBindingValues(e); });
// your one-function
function getBindingValues(e) {
clientX = e.clientX ? e.clientX : clientX;
clientY = e.clientY ? e.clientY : clientY;
screenX = e.screenX ? e.screenX : screenX;
screenY = e.screenY ? e.screenY : screenY;
pageX = e.pageX ? e.pageX : pageX;
pageY = e.pageY ? e.pageY : pageY;
$("#hello").html(
"*** Safe values ***<br/>" +
"mouse: X." + clientX + " Y." + clientY + "<br/>" +
"page: X." + pageX + " Y." + pageY + "<br/>" +
"screen: X." + screenX + " Y." + screenY + "<br/><br/>" +
"*** More values ***<br/>" +
"window: W." + $(window).width() + " H." + $(window).height() + "<br/>" +
"type: <b>" + e.type + "</b>"
);
}
you can compare below the e (event) object on mousemove and scroll
on scroll
on mousemove

Categories

Resources