|
JavaScript - Dom Onmousedown, Onmousemove
When a user pushes their mouse down on a DOM element I want to allow them to move it, so I would like to setup an on mouse move function. The code i have is:
Code: var newHeader = document.createElement("div");
newHeader.id = "header" + tabID;
newHeader.className = "windowHeader";
newHeader.onmousedown = 'desktop.onmousemove = moveWindow('+tabID+');';
newHeader.onmouseup = 'desktop.onmousemove = null;';
newWindow.appendChild(newHeader);
However it doesn't work hence why I'm here... Any help appreciated! Similar TutorialsI'm writing a JavaScript Equation Editor / Whiteboard App, and i seem to be having a problem with one line of JavaScipt Code.... The Equation Editor is hosted live he http://kevinjohnson.clanteam.com/JsE...ionEditor.html Code: var AddMathElement = "<img src='" + Object.id + ".PNG' id='" + CurrentEquation + Elements + "' class='MathElement' onMouseDown='MoveImage(this, event);'>"; I have used the DOM Inspector (i'm using firefox) to look at the onMouseDown= event code, and it should work.... However, when i try to drag a Math Element Image to a different location (after it has been added to the page by clicking on the Math Element Keyboard), it does nothing. I looked on the Error Console, and there is nothing there. I looked at the Node value in the DOM inspector, and it is as it should be. I have also tried changing and removing some double quotes and single quotes, as that has worked in the past on similar code snippets. Hello, I've been writting HTML since last friday and javascript since yesterday. And I'm stuck on my first project. My functions for mouse_move / up / down all control the movement of a box. So you can click a box and move it anyway. It then snaps to an invisible grid. However there are multiple boxes on the screen so if you move it to a spot where another box already resides, then that box needs to swap places. This is what the mouse_over function tries to do. When I click the first box it stores the position of that box that was clicked. If I release the mouse button whilst hoovering over another box I want the other box to take the stored positions of the first box. However what I think is happening is the mouseover function is applying the new position to the box I'm moving, as I guess this is the first layer the mouse is over. Is there anyway I can reference the layer underneath using onmouseover. Sorry if this is jibberish. Thank you very much. Code:
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var swap = false;
function mouse_over(ele_name2)
{
if (swap = true)
{
element2 = ele_name2;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
swap = false;
element2 = null
}
}
function mouse_move(event)
{
x=event.pageX;
y=event.pageY;
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
swap = false
element = ele_name;
document.getElementById(element).style.cursor = 'move';
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
if (x < 317)
{
document.getElementById(element).style.left = Math.floor(x / 316 - 1) * 316 +'px';
}
else
{
document.getElementById(element).style.left = 0+'px';
}
element = null;
swap = true;
}
</script>
Hi I am trying to make a function run if the mouse is moved over the document but when using the object onmousemove it seems to run the code even if the mouse is still over then document, how can I make it so if the mouse is over the document but isn't moving then don't run the code but once the mouse moves run the code? This is the code I made to handle the mouse move collections. Code: function onmove(func) {
var oldonmove = document.onmousemove;
if(typeof document.onmousemove != 'function') {
document.onmousemove = func;
} else {
document.onmousemove = function() {
oldonmove();
func();
};
}
}
And to use it you would do this. Code: <script type="text/javascript">
/* Alert A Message Everytime The User Moves Their Mouse */
onmove(function(){ alert('You Moved!'); });
</script>
But with this code it runs even when the user doesn't move their mouse and the notification box pops up every second as the code seems to think a still mouse is a moving mouse. I was thinking about having a run once system but that would mean if the mouse moves it runs once and then if the mouse moves again the code will not run as it has already ran before. If anyone can help me please reply, Thank You. DJCMBear. I have some code which looks like this. Code: <script type="text/javascript">
function links(){
var links=document.getElementsByTagName("A");
for(var i=0;i<links.length;i++){
links[i].onmousedown=function(i){
return Showalert(links[i]);
};
}
}
function Showalert(link){
alert("link: "+link);
}
</script>
What I want to know is how I can pass the number which 'i' is of the current link being clicked so like this - links hi // i = 0 hello // i = 1 dude // i = 2 so from the for loop I want the i to be passed into the function which "links[i].onmousedown" is outputting so when the user clicks any link on the page the function within the mousedown call can read the number of the link? can anyone help? EDIT: Don't worry I've done it. on my page: http://www.jbiddulph.com/john-drag.html I want to be able to show the TOP and LEFT position on the textboxes below when I move the box?! Please help?! thanks J I have 9 boxes which I can drag around an invisible grid however when the onMouseDown function is called for the first time on each of the boxes, they behave erratically, then once all boxes have been clicked once, the entire script works as it should. I've tried using default values when declaring the variables however it doesn't seem to do anything. Does this happen with anyone else, anything obvious I'm missing. Code: <html>
<head>
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var newleft;
var newtop;
function mouse_move(event)
{
if(event.offsetX || event.offsetY)
{
x=event.offsetX;
y=event.offsetY;
}
else
{
x=event.pageX;
y=event.pageY;
}
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
element = document.elementFromPoint(x, y).id;
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
newtop = Math.floor((y-diff_org_top+100)/200) * 200;
newleft = Math.floor((x-diff_org_left+100)/200) * 200;
if (newtop<0)
{
newtop = 0;
}
else if (newtop>400)
{
newtop = 400;
}
if (newleft<0)
{
newleft = 0;
}
else if (newleft>400)
{
newleft = 400;
}
document.getElementById(element).style.display = 'none';
if (document.elementFromPoint(newleft+100, newtop+100).id != '')
{
element2 = document.elementFromPoint(newleft+100, newtop+100).id;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
element2 = null
}
document.getElementById(element).style.display = 'block';
document.getElementById(element).style.top = newtop +'px';
document.getElementById(element).style.left = newleft +'px';
element = null;
}
</script>
<style type="text/css">
.box
{
float:left;
display:block;
width:190;
height:190;
margin:5;
position:absolute;
}
.red
{
background:red;
top:0;
left:0;
}
.blue
{
background:blue;
top:0;
left:201;
}
.yellow
{
background:yellow;
top:0;
left:401;
}
.green
{
background:green;
top:201;
left:0;
}
.violet
{
background:violet;
top:201;
left:201;
}
.orange
{
background:orange;
top:201;
left:401;
}
.maroon
{
background:maroon;
top:401;
left:0;
}
.lime
{
background:lime;
top:401;
left:201;
}
.indigo
{
background:indigo;
top:401;
left:401;
}
</style>
</head>
<body onMouseMove="mouse_move(event)">
<div id="one" class="red box" onMouseDown="mouse_down('one')" onMouseUp="mouse_up()">
</div>
<div id="two" class="blue box" onMouseDown="mouse_down('two')" onMouseUp="mouse_up()">
</div>
<div id="three" class="yellow box" onMouseDown="mouse_down('three')" onMouseUp="mouse_up()">
</div>
<div id="four" class="green box" onMouseDown="mouse_down('four')" onMouseUp="mouse_up()">
</div>
<div id="five" class="orange box" onMouseDown="mouse_down('five')" onMouseUp="mouse_up()">
</div>
<div id="six" class="violet box" onMouseDown="mouse_down('six')" onMouseUp="mouse_up()">
</div>
<div id="seven" class="maroon box" onMouseDown="mouse_down('seven')" onMouseUp="mouse_up()">
</div>
<div id="eight" class="lime box" onMouseDown="mouse_down('eight')" onMouseUp="mouse_up()">
</div>
<div id="nine" class="indigo box" onMouseDown="mouse_down('nine')" onMouseUp="mouse_up()">
</div>
</body>
</html>
Hello, If you will open: joketube.tv (please use admin as username and admin as password) and have a look on the top menu you will find UPLOAD link. Please click on it and you will see 'popup window'. Everything is ok with except that all parts of the window is dragable... I was expecting following. After placing some container DIV element (none transparent) with higher z-index over dragable background DIV. This region (with higher z-index) would become NONE dragable! BUT what I got is that even if DIV is hidden behinde other DIV elements, onmousedown is still working for that hidden DIV. Why this happened and how can I solve this problem? Thank you in advance for any suggestion I have created a drag script and am having a problem with the cursor. When I hover over the div, the cursor becomes "move" as I want it to be. But if I click, then drag it changes to the I-beam cursor. I am wondering what I can do to get it to stay "move" or whatever I'd like it to be. I know things like onselectstart, etc, but that doesn't seem to do anything. Thanks for your time.
. SOURCE: Here Code: 1 document.onmousemove = mouseMove;
2
3 function mouseMove(ev){
4 ev = ev || window.event;
5 var mousePos = mouseCoords(ev);
6 }
7
8 function mouseCoords(ev){
9 if(ev.pageX || ev.pageY){
10 return {x:ev.pageX, y:ev.pageY};
11 }
12 return {
13 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
14 y:ev.clientY + document.body.scrollTop - document.body.clientTop
15 };
16 }
#1: How is it that "mouseMove" is assigned to "document.onmousemove" from right-to-left? What exactly is taking place here? #3: How can "mouseMove" be declared as a function afterwards? #3: I periodically see "e" being placed in functions. Is "ev" taking the place for "e"? If so is "ev" or "e" a global object? Where do they initially come from and how do they work? . |
|||||||