Develop Reference

Loop for onmousemove event

I've run into a problem with running a loop to trigger a mousemove event on my HTML/CSS.
I know I can go through and get every individual ID on the HTML tags to execute the code the way I want. But I know there is a better way to do it with a loop of some sort and use far less code.
The images should follow the mouse while moving over the div with class mycard. Any suggestions or ideas on how to get it working properly would be very much appreciated.
I've tried running a loop to add the classes to divs but had no luck.
var mouseHover = document.getElementById('moveHover');
window.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
mouseHover.style.top = (y + 20) + 'px';
mouseHover.style.left = (x + 20) + 'px';
};
.mycard span {
position: absolute;
display: none;
z-index: 99;
}
.mycard:hover span {
display: block;
position: fixed;
overflow: hidden;
}
.imgHover a {
position: relative;
}
.imgHover span {
position: absolute;
display: none;
z-index: 99;
}
.imgHover a:hover span {
display: block;
position: fixed;
overflow: hidden;
}
<div class="imgHover mycard">
<div class="cardcost">
<p class="cardcosttext">2</p>
</div>
<div class="hscardepic">
<a style="margin-left: 1000%;vertical-align: middle;">
Doomsayer
<span id="moveHover">
<img src="Classic_Set/doomsayer.png" height="300" width="300" />
</span>
</a>
</div>
<div class="cardamount">
<p class="cardamounttext">×2</p>
</div>
</div>

If I understand what you're asking, you could use querySelectorAll to get the elements and forEach to move them:
// get the div that responds to mouse movement
const mycard = document.querySelector('.mycard');
// add a mousemove listener
mycard.addEventListener('mousemove', function(e) {
// get the DOM element with the mousemove listener from the event
const {target} = e;
// get img child elements of the target.
// (use whatever css selector you need here. doesn't have to img)
const images = target.querySelectorAll('img');
// iterate over each item...
images.forEach(image => {
// ...and do whatever you need to do with it
const x = e.clientX;
const y = e.clientY;
image.style.top = (y + 20) + 'px';
image.style.left = (x + 20) + 'px';
})
});

I'm also not entirely sure what your end-goal is, but I'll take a stab at it.
I would recommend changing moveHover to being the class instead of the ID. Then you could do something like this:
var mouseHover = null;
window.onmousemove = function (e) {
if(mouseHover != null){
var x = e.clientX;
var y = e.clientY;
mouseHover.style.top = (y+20) + 'px';
mouseHover.style.left = (x+20) + 'px';
}
};
function onHover(e){
mouseHover = e.target.querySelector('.moveHover');
}
var elements = document.getElementsByClassName('imgHover');
for(var i = 0; i < elements.length; i++){
elements[i].onmouseenter = onHover;
}
The loop runs one time to set the onmouseenter event. Sure beats moving all .moveHover elements all the time.

javascript/jquery selecting last element in row

I'm using "float: left" to place blocks in container. Like this on large screen:
on small scree:
can i select last element on row when user clicks on any element?

If the elements are all inline or floating then there wont be a concept of a "last element on row".
I suggest you calculate the element using known values:
$('.box').on('click', function (e) {
// calculate how many boxes will be in a "row"
var windowWidth = $('ul').width();
var boxWidth = $('.box').outerWidth();
var boxesPerRow = ~~(windowWidth / boxWidth);
// get the index of the clicked element
var index = $(e.currentTarget).index();
// get the column of the clicked element
var col = (index % boxesPerRow) + 1;
// calculate how far it is to the end of this row,
// and select that element
var $endOfRow = $('.box').eq(index + boxesPerRow - col);
if (!$endOfRow.length) $endOfRow = $('.box').last();
});
Updated my answer with one that works. Here's the fiddle: http://jsfiddle.net/gvbw9Lkz/4/

As an alternative you can dynamically work out which elements are in the same row by comparing their position() values:
$(function() {
// cache the collection of all the blocks
var blocks = $('.block');
blocks.on('click', function() {
blocks.removeClass('highlight');
var $this = $(this);
// get the y coordinate of the clicked block
var y = $this.position().top;
// store the blocks in the row
var rowBlocks = $this;
// search backwards until we find a different y coordinate or reach 0
for (var i = $this.index() - 1; i >= 0; i--) {
var block = blocks.eq(i);
if (block.position().top == y) {
// add the element to the rowBlocks selector
rowBlocks = rowBlocks.add(block);
} else {
// different coordinate, stop searching
break;
}
}
// search forwards until we find a different y coordinate or reach the end
for (var i = $this.index() + 1; i < blocks.length; i++) {
var block = blocks.eq(i);
if (block.position().top == y) {
// add the element to the rowBlocks selector
rowBlocks = rowBlocks.add(block);
} else {
// different coordinate, stop searching
break;
}
}
// hightlight the row
rowBlocks.addClass('highlight');
});
});
.container {
width: 300px;
}
.block {
background-color: #000;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.block.highlight {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
<div class="block">16</div>
<div class="block">17</div>
<div class="block">18</div>
<div class="block">19</div>
<div class="block">20</div>
</div>

tooltip in pure JS

I am trying this code but i get: document.getElementsByName(...).style is undefined
I have also a problem with the delegation, i think. Any help?
<html>
<head>
<style type="text/css">
#toolTip {
position:relative;
width:200px;
margin-top:-90px;
}
#toolTip p {
padding:10px;
background-color:#f9f9f9;
border:solid 1px #a0c7ff;
-moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
#tailShadow {
position:absolute;
bottom:-8px;
left:28px;
width:0;height:0;
border:solid 2px #fff;
box-shadow:0 0 10px 1px #555;
}
#tail1 {
position:absolute;
bottom:-20px;
left:20px;
width:0;height:0;
border-color:#a0c7ff transparent transparent transparent;
border-width:10px;
border-style:solid;
}
#tail2 {
position:absolute;
bottom:-18px;
left:20px;
width:0;height:0;
border-color:#f9f9f9 transparent transparent transparent;
border-width:10px;
border-style:solid;
}
</style>
<script type='text/javascript'>
function load () {
var elements = document.getElementsByName('toolTip');
for(var i=0; i<elements.length; i++) {
document.getElementsByName(elements[i]).style.visibility = 'hidden';
}
}
</script>
</head>
<body onload="load()">
<br><br><br><br><br><br><br><br><br><br><br><br>
<a class="hd"
onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'"
onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a>
<div id="toolTip" name="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
<br><br><br>
<a class="hd"
onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'"
onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a>
<div id="toolTip" name="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
</body>
</html>
demo

Try changing the id toolTip to a class:
<div class="toolTip">...</div>
And change your JS to use the display style-thing, rather than visibility, nd the onmouseover's are best dealt with using JS event delegation:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
mouseOver = function(e)
{//handler for mouseover
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;//gets the next element in DOM (ie the tooltip)
//check if mouse is over a relevant element:
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/))
{//nope? stop here, then
return e;
}
targetToolTip.style.display = 'block';//make visible
for (i=0;i<tooltips.length;i++)
{//closures are neat --> you have a reference to all tooltip elements from load scope
if (tooltips[i] !== targetToolTip)
{//not the one you need to see
tooltips[i].style.display = 'none';
}
}
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
//add listener:
if (document.body.addEventListener)
{//IE > 9, chrome, safari, FF...
document.body.addEventListener('mouseover',mouseOver,false);
}
else
{//IE8
document.body.attachEvent('onmouseover',mouseOver);
}
}
Google JavaScript event delegation and closures if this code isn't clear, but that's just how I would tackle this kind of thing. IMO, it's fairly efficient (you could use the closure scope to keep track of the tooltip that's currently visible and not loop through all of them, too, that would be even better:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
currentToolTip,//<-- reference currently visible
mouseOver = function(e)
{
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
{//add check for currently visible TT, if so, no further action required
return e;
}
if (currentToolTip !== undefined)
{
currentToolTip.style.display = 'none';//hide currently visible
}
targetToolTip.style.display = 'block';//make new visible
currentToolTip = targetToolTip;//keep reference for next event
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
if (document.body.addEventListener)
{
document.body.addEventListener('mouseover',mouseOver,false);
}
else
{
document.body.attachEvent('onmouseover',mouseOver);
}
}
And you're there.
Edit:
To hide the tooltip on mouseout, you can either add a second listener directly:
function load()
{
var i, tooltips = document.getElementsByClassName('toolTip'),
currentToolTip,//<-- reference currently visible
mouseOver = function(e)
{
e = e || window.event;
var i, target = e.target || e.srcElement,
targetToolTip = target.nextElementSibling || nextSibling;
if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
{//add check for currently visible TT, if so, no further action required
return e;
}
if (currentToolTip !== undefined)
{
currentToolTip.style.display = 'none';//hide currently visible
}
targetToolTip.style.display = 'block';//make new visible
currentToolTip = targetToolTip;//keep reference for next event
},
mouseOut = function(e)
{
e = e || window.event;
var movedTo = document.elementFromPoint(e.clientX,e.clientY);//check where the cursor is NOW
if (movedTo === curentToolTip || currentToolTip === undefined)
{//if cursor moved to tooltip, don't hide it, if nothing is visible, stop
return e;
}
currentTooltip.style.display = 'none';
currentTooltip = undefined;//no currentToolTip anymore
};
for (i=0;i<tooltips.length;i++)
{
tooltips[i].style.display = 'none';
}
if (document.body.addEventListener)
{
document.body.addEventListener('mouseover',mouseOver,false);
document.body.addEventListener('mouseout',mouseOut,false);
}
else
{
document.body.attachEvent('onmouseover',mouseOver);
document.body.attachEvent('onmouseout',mouseOut);
}
}
Note, this is completely untested. I'm not entirely sure if IE < 9 supports elementFromPoint (gets the DOM element that is rendered at certain coordinates), or even if the IE event object has the clientX and clientY properties, but I figure a quick google will tell you more, including how to get the coordinates and the element that is to be found under the cursor in old, crummy, ghastly IE8, but this should help you on your way. Of course, if you don't want the contents of the tooltip to be selectable, just change the mouseOut function to:
mouseOut = function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (currentToolTip)
{
currentToolTip.style.diplay = 'none';
currentToolTip = undefined;
}
};
No need to check if the mouseout was on the correct element, just check if there is a current tooltip, and hide it.

Try using classes to mark the tooltips:
<div id="toolTip1" class="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
And JQuery to toggle the visibility using the class as the selector:
$('.toolTip').attr('visibility', 'hidden')
Definitely clean up the non-unique Id's - this will cause you no end of troubles otherwise

Your problem is likely because you're using the same id for both the tooltips. This is invalid; an id should be unique -- only one element in a given page should have a specific ID.
If you need a shared identifier for multiple objects, use a class instead.

I built a tooltip with a border in pure js that doesn't use hover.
html
<div id="infoId" class='info' style="font-variant:small-caps;text-align:center;padding-top:10px;">
<span id="innerspanid">
</span>
</div>
</div>
<input id="startbtn" class="getstartedbtn" type="button" value="Start >" />
</div>
js
function getTextWidth(text, font) {
// re-use canvas object for better performance
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
}
function getCssStyle(element, prop) {
return window.getComputedStyle(element, null).getPropertyValue(prop);
}
function getCanvasFontSize(el = document.body) {
const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
const fontSize = getCssStyle(el, 'font-size') || '16px';
const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
return `${fontWeight} ${fontSize} ${fontFamily}`;
}
let arrowDimensionWidth = 20;
let arrowDimensionHeight = 20;
let tooltipTextHorizontalMargin = 50;
function openTooltip(text) {
let innerSpan = document.getElementById("innerspanid");
innerSpan.innerHTML = text;
let computedW = getTextWidth(text, getCanvasFontSize(innerSpan)) + tooltipTextHorizontalMargin;
let pointer = document.getElementById('pointer')
pointer.style.right = (((computedW / 2) - (arrowDimensionWidth / 2)) - (0)) + 'px';
let elem = document.getElementById('tooltipHost').parentNode.querySelector('div.info_container');
elem.style.left = ((tooltipHost.getBoundingClientRect().width - computedW) / 2) + "px";
elem.style.width = computedW + "px";
elem.style.display = 'block';
}
function buildTooltip() {
let elements = document.querySelectorAll('div.tooltip');
// Create a canvas element where the triangle will be drawn
let canvas = document.createElement('canvas');
canvas.width = arrowDimensionWidth; // arrow width
canvas.height = arrowDimensionHeight; // arrow height
let ctx = canvas.getContext('2d');
ctx.strokeStyle = 'darkred'; // Border color
ctx.fillStyle = 'white'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1, canvas.height); // lower left corner
ctx.lineTo((canvas.width / 2), 1); // upper right corner
ctx.lineTo(canvas.width, canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2); //fix bottom row
// Create a div element where the triangle will be set as background
pointer = document.createElement('div');
pointer.id = "pointer"
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.zIndex = '1'; // place it over the other elements
let idx;
let len;
for (idx = 0, len = elements.length; idx < len; ++idx) {
let elem = elements[idx];
let text = elem.querySelector('div.info');
let info = document.createElement('div');
text.parentNode.replaceChild(info, text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
}
}
window.addEventListener('load', buildTooltip);
window.addEventListener('load', wireup);
function wireup() {
document.getElementById('startbtn').addEventListener('click', function (evt1) {
openTooltip("bad email no # sign");
return false;
});
}
css
div.tooltip {
position: relative;
display: inline-block;
}
div.tooltip > div.info {
display: none;
}
div.tooltip div.info_container {
position: absolute;
left: 0px;
width: 100px;
height: 70px;
display: none;
}
div.tooltip div.info {
position: absolute;
left: 0px;
text-align: left;
background-color: white;
font-size: 18px;
left: 1px;
right: 1px;
top: 20px;
bottom: 1px;
color: #000;
padding: 5px;
overflow: auto;
border: 1px solid darkred;
border-radius: 5px;
}

How do I make a function to find the coordinates of an element regardless of its positioning?

I'm making a drag and drop engine in JavaScript, and I don't know how to set the correct position of the dragObj because it changes depending on the parent element's positioning type (Does the dragObj also change depending on its parent's "parent element" ect.?).
So, my dragObj looks like this:
function makeObj(event) {
var obj = new Object();
var e = event.target;
obj.element = e;
obj.boundElement = null;
while(e = e.parentNode) {
if(~e.className.search(/bound/)) { //if(/bound/.test(e.className)) {
obj.boundElement = e;
break;
}
}
if(obj.boundElement == null)
obj.boundElement = document.body;
// I would like to find the correct minimum bounds with findPos(); however, I need
// findPos() to work with every type of positioning (absolute, relatice, ect.)
//var elemPos = findPos(obj.boundElement);
//obj.minBoundX = elemPos.x;
//obj.minBoundY = elemPos.y;
obj.minBoundX = obj.boundElement.offsetLeft + obj.boundElement.offsetWidth - obj.element.offsetWidth;
obj.minBoundY = obj.boundElement.offsetTop + obj.boundElement.offsetHeight - obj.element.offsetHeight;
obj.maxBoundX = obj.boundElement.offsetLeft;
obj.maxBoundY = obj.boundElement.offsetTop;
setHelperBoxPos(obj);
obj.posX = event.clientX - obj.element.offsetLeft;
obj.posY = event.clientY - obj.element.offsetTop;
return obj;
}
So, when I make a dragObj, I also set its "position" and its bounding element. In a comment portion right before I set the .minBoundX and .minBoundY attributes I explain how I would like to set them; however, it doesn't work because the findPos() function doesn't work.
Here is the findPos() function:
function findPos(obj) { // Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
I believe this function works if the bounding element has position: absolute; set, but I want the user to be able to set its positioning type. Also, the bounding element is set by the .bound class, and the dragObj is set by the .drag class.
Here's the HTML:
<div id="min" class="helper-box" style="border: 1px solid blue;"></div>
<div id="max" class="helper-box" style="border: 1px solid red;"></div>
<div id="center">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square"> One </p>
<p class="drag square"> Two </p>
</div>
</div>
And here is the CSS:
#charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
body {
background-color:#DFDFDF;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
;
}
.square {
width: 100px;
height: 100px;
background: #1047A9;
cursor:move;
border-radius: 25px;
-moz-border-radius: 25px;
}
#center {
width: 500px;
margin: auto;
margin-top: 50px;
background-color: #29477F;
color: #E8E8E8;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #009EBE;
height: 275px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 1.0;
}
.helper-box {
position: absolute;
width: 5px;
height: 5px;
}
And here is the entire engine:
// JavaScript Document
var dragObj;
document.addEventListener("mousedown", down, false);
function down(event) {
if(~event.target.className.search(/drag/)) {
dragObj = makeObj(event);
dragObj.element.style.zIndex="100";
document.addEventListener("mousemove", freeMovement, false);
}
}
function freeMovement(event) {
if (typeof(dragObj.element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
dragObj.element.style.left = Math.max(dragObj.maxBoundX, Math.min(dragObj.minBoundX, event.clientX - dragObj.posX)) + "px";
dragObj.element.style.top = Math.max(dragObj.maxBoundY, Math.min(dragObj.minBoundY, event.clientY - dragObj.posY)) + "px";
}
function drop() {
dragObj.element.style.zIndex="1";
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
function makeObj(event) {
var obj = new Object();
var e = event.target;
obj.element = e;
obj.boundElement = null;
while(e = e.parentNode) {
if(~e.className.search(/bound/)) { //if(/bound/.test(e.className)) {
obj.boundElement = e;
break;
}
}
if(obj.boundElement == null)
obj.boundElement = document.body;
// I would like to find the correct minimum bounds with findPos(); however, I need
// findPos() to work with every type of positioning (absolute, relatice, ect.)
//var elemPos = findPos(obj.boundElement);
//obj.minBoundX = elemPos.x;
//obj.minBoundY = elemPos.y;
obj.minBoundX = obj.boundElement.offsetLeft + obj.boundElement.offsetWidth - obj.element.offsetWidth;
obj.minBoundY = obj.boundElement.offsetTop + obj.boundElement.offsetHeight - obj.element.offsetHeight;
obj.maxBoundX = obj.boundElement.offsetLeft;
obj.maxBoundY = obj.boundElement.offsetTop;
setHelperBoxPos(obj);
obj.posX = event.clientX - obj.element.offsetLeft;
obj.posY = event.clientY - obj.element.offsetTop;
return obj;
}
function findPos(obj) { // Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
function setHelperBoxPos(obj) {
var minBox = document.getElementById('min');
minBox.style.left = obj.minBoundX + 'px';
minBox.style.top = obj.minBoundY + 'px';
var maxBox = document.getElementById('max');
maxBox.style.left = obj.maxBoundX + 'px';
maxBox.style.top = obj.maxBoundY + 'px';
}
I have also made a jsfiddle for your convenience: http://jsfiddle.net/2XGhK/
So, how do I make a findPos() function which allows for different kinds of positioning. Will I need to make another findPos() function to allow the dragObj to be any kind of positioning as well?
Important Please do not recommend using a library (unless you suggest looking at it for tips on how they deal with positioning).The reason is that I am just learning the language and building things helps me do just that. What's the point in learning a library before I even understand the language?
Most importantly, I greatly appreciate all of your help. Thank you.

In developing Javascript, jQuery really is your best friend, as it simplifies many of these (potentially annoying) tasks. I totally dig the desire to learn without them though; it's a great way to become proficient.
Take a look at jQuery's docs and implementation for position and offset, and hopefully that will give you a good idea for a starting place.
Docs:
http://api.jquery.com/position/
http://api.jquery.com/offset/
Source:
https://github.com/jquery/jquery/blob/master/src/offset.js

I don't know if this is exactly what you need but implementing drag&drop with javascript requires a lot of efforts and testing, especially when you are dealing with parent-children dragging.
Try this one:
http://interface.eyecon.ro/demos/drag.html
Maybe you can read its source code and use it to fit your needs.

Simply make drag object's position absolute -
obj.element = e;
obj.element.style.position = "absolute";
obj.boundElement = null;
btw, thanks for using jsfiddle, it helps.

How useful is this code fragment?
var position = {};
var dragObj = "";
function initDrag(e){
e = e || window.event;
position.objLeft = parseInt(dragObj.style.left);
position.objTop = parseInt(dragObj.style.top);
if( isNaN(position.objLeft) )
position.objLeft = 0;
if( isNaN(position.objTop) )
position.objTop = 0;
position.startX = e.clientX;
position.startY = e.clientY;
if( document.addEventListener )
{
e.preventDefault();
dragObj.addEventListener('mousemove',startDrag,false);
dragObj.addEventListener('mouseup',stopDrag,false);
dragObj.addEventListener('mouseout',stopDrag,false);
}
else
{
dragObj.attachEvent('onmousemove',startDrag);
dragObj.attachEvent('onmouseup',stopDrag);
dragObj.attachEvent('onmouseout',stopDrag);
}
}
function startDrag(e){
e = e || window.event;
dragObj.style.left = position.objLeft+e.clientX-position.startX;
dragObj.style.top = position.objTop+e.clientY-position.startY;
return false;
}

Actually when working with finding the elements position, you use its offsetLeft(/Top). And each element have an offsetParent from where that position origins. When you drag an element, it is good to know it's position according to the whole document (read ), so you get a more precise point. So to find an elementes position you must create the following function:
function findPos(elm) {
var testElm = elm, pos = {x:0, y:0};
while( !!testElm && testElm.tagName.toLowerCase() !== "body" ) {
pos.x += testElm.offsetLeft;
pos.y += testElm.offsetTop;
// important to use offsetParent instead of just parentNode,
// as offsetParent will be where the element gets its offset from.
// And that is not necesarily it parentNode!
testElm = testElm.offsetParent;
}
return pos;
}
But i agree with some of the others, that jQuery DO simplify alot of these tedious calculations. But I really think it is best to get to know JS before you use the API's as it give you an understading of what JS really is.
PS. Dont call this method for every mousemove event, as it will compromise performance. Intead save the value on the element (<your node>["startoffset"] = findPos(<your node>)), and then use it in the mousemove script to find its new position. Actually it is good practice, to save as many values you can upon mousedown, as mousemove will be called ALOT, and therefore should perform as little calculations/traversing as possible.
See it in action: http://jsfiddle.net/fnwxu/22/

Simplest solution:
Set the element to visibility:hidden. Clone the element, set the clone to position:absolute, perform dragging. Once dragging stops (i.e. the user has released the left mouse button), replace the clone with the original element.
This allows you to keep the element in flow for the duration of the draggable operation. That way if the element cannot be dropped in location y (for example), you can have the helper snap back to the original location.

I am a beginner in JavaScript. I found your question very interesting and thought of Googling it. I found these two links which may be of use to you:
http://www.codingforums.com/archive/index.php/t-84055.html
http://www.codeproject.com/KB/scripting/DragDrop_Part-2.aspx

dojo - mouse(x, y) - drag and drop - frustration

I'm attempting to drag an object using dojo.dnd but want the avatar to be in the same position as the object was (relative to the mouse)
i.e. if a person clicks in the middle of the object then the mouse cursor will be in the middle of the avatar.
I've had all sorts of strange results.
if i connect a function to body.onmousemove the drop part of the dnd fails.
How can i get this working?
<html>
<head>
<title>DnD Events</title>
<style type="text/css">
.target
{
border: 1px dotted gray;
width: 300px;
height: 300px;
padding: 5px;
-moz-border-radius: 8pt 8pt;
radius: 8pt;
}
.source
{
border: 1px dotted skyblue;
height: 200px;
width: 300px;
-moz-border-radius: 8pt 8pt;
radius: 8pt;
}
.dojoDndItemOver
{
background: #feb;
border: 1px dotted gray;
}
.target .dojoDndItemAnchor
{
background: #ededed;
border: 1px solid gray;
}
.dojoDndAvatarHeader {
display: none;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:false"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.Source");
dojo.require("dojo.dnd.Container");
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.dnd.Manager");
dojo.require("dojo.dnd.Avatar");
var mouse = { x: 0, y: 0 , handle:undefined};
function mouseCoords(ev) {
var px, py;
ev = ev || window.event;
if (ev.pageX || ev.pageY) {
px = ev.pageX; py = ev.pageY;
} else {
px = ev.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
py = ev.clientY + dojo.body().scrollTop - dojo.body().clientTop;
}
mouse = { x: px, y: py };
// dojo.byId("msg").innerHTML = dojo.toJson(mouse);
}
//dnd WORKS when following lines are commented out. (positioning fails)
var mchandle = dojo.connect(document, "onmousemove", 'mouseCoords');
//dojo.query(".dojoDndItem").connect("onclick", 'mouseCoords');
//dojo.dnd.Source.onMouseDown('mouseCoords')
</script>
<script type="text/javascript">
var item_price;
var total = 0;
function AddItems(target, nodes) {
for (var i = 0; i < nodes.length; i++)
{ total += parseFloat((target.getItem(nodes[i].id)).data); }
dojo.byId("cost").innerHTML = total;
}
function SubstractItems(target, nodes) {
for (var i = 0; i < nodes.length; i++) {
total -= parseInt((target.getItem(nodes[i].id)).data);
}
dojo.byId("cost").innerHTML = total;
}
function ShowPrice(target, nodes) {
var sum = 0;
for (var i = 0; i < nodes.length; i++) {
dojo.dnd.manager().OFFSET_X = 0 - (mouse.x - dojo._abs(nodes[i]).x);
dojo.dnd.manager().OFFSET_Y = 0 - (mouse.y - dojo._abs(nodes[i]).y);
dojo.dnd.manager().updateAvatar();
sum += parseInt((target.getItem(nodes[i].id)).data);
}
dojo.byId("msg").innerHTML = "Selected Item Price is $" + sum;
}
function ClearMsg()
{ dojo.byId("msg").innerHTML = ""; }
function init() {
dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
var t = dojo.dnd.manager().target;
ClearMsg();
if (t == source) { return; }
if (t == cart) { AddItems(t, nodes); }
if (t == shelf) { SubstractItems(t, nodes); }
});
dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
ShowPrice(source, nodes);
});
dojo.subscribe("/dnd/cancel", function() {
ClearMsg();
});
}
dojo.addOnLoad(init);
</script>
</head>
<body style="font-size: 12px;">
<table>
<tbody>
<tr valign="top">
<td>
SOURCE
<div dojotype="dojo.dnd.Source" jsid="shelf" class="source" id="source1" accept="red,blue"
singular="false">
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="10" title="$10" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="60" title="$60" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="13" title="$13" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="15" title="$15" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="3" title="$3" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="148" title="$148" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="1" title="$1" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="10" title="$10" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="3" title="$3" />
</div>
</td>
<td>
TARGET
<div dojotype="dojo.dnd.Source" jsid="cart" class="target" accept="red,blue" id="target1">
</div>
</td>
<td>
Total Price (USD): <span id="cost">0.00</span><br />
<b>Message: <span id="msg" style="color: blue"></span></b>
<td>
</tr>
<tbody />
</table>
</body>
</html>

Dojo's DND is a limited in this sense. The avatar is positioned offset so the move events are not trapped by the node representing the drag. Typical source/targets will not work in this case. I have created a hybrid "mover/source" dnd example that may help you along with what you are trying to accomplish:
http://svn.dojotoolkit.org/src/demos/trunk/beer/src/dnd.js
Basically, we connect "mousedown" to some node. When that is fired, we create a clone of that node directly over where the the original node is in the page (see _dragStart function). Then, we register temporary mousemove and mouseup event listeners. mousemove is a tight function optimized for speed. simply set the top/left position of the "avatar" (the clone) relative to e.pageX and e.pageY (normalized event object parts).
when mouseup is fired, we disconnect both mouseup and mousemove events (this._listeners). In the sample the "overTarget" function simply returns true. You can change this logic to be whatever you need to ensure the current pageX/pageY coords are within a bounding box of your choice (a Source/Target, whatever, however you like).
In the example, I have it animating back to the original x/y of the "source", or turning it into a dojo.dnd.Moveable (it being the cloned node), creating a sort of markupfactory out of the source. You will likely want to just use this to add whatever data to your cart, and destroy the avatar.
Hope this helps.

For the time being...(since i didn;t know how to implement the hybrid js)
i've utilised the cancel event and compared the mouse coords to each source object on the page to determine which one it's was intended to be dropped into.
JS in page is now:
var mchandle;
dojo.require("dojo.dnd.Source");
var lastSrc;
function init() {
dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
dojo.byId("msg").innerHTML += " drop";
dojo.disconnect(mchandle);
});
dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
lastSrc = source;
mchandle = dojo.connect(dojo.doc, "onmousemove", "mouseCoords");
dojo.byId("msg").innerHTML = "start";
var px = 0;
var py = 0;
for (var i = 0; i < nodes.length; i++) {
var nPos = dojo._abs(nodes[i]);
px = nPos.x > px ? nPos.x : px;
py = nPos.y > py ? nPos.y : py;
}
dojo.dnd.manager().OFFSET_X = 0 - (source._lastX - px);
dojo.dnd.manager().OFFSET_Y = 0 - (source._lastY - py);
});
dojo.subscribe("/dnd/cancel", function() {
dojo.byId("msg").innerHTML += " cancel";
dojo.query("[dojotype=\"dojo.dnd.Source\"]").forEach(function(node, index, array) {
var elemXY = dojo.coords(node);
if ( //in source box
(elemXY.x <= document.mouse.x && document.mouse.x <= (elemXY.x + elemXY.w)) && (elemXY.y <= document.mouse.y && document.mouse.y <= (elemXY.y + elemXY.h))) {
var s = new dojo.dnd.Source(node, null);
s.insertNodes(true, lastSrc.getSelectedNodes(), null, null);
}
});
dojo.disconnect(mchandle);
lastSrc = null;
});
}
dojo.addOnLoad(init);
function mouseCoords(ev) {
var px, py;
ev = ev || window.event;
if (ev.pageX || ev.pageY) {
px = ev.pageX;
py = ev.pageY;
} else {
px = ev.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
py = ev.clientY + dojo.body().scrollTop - dojo.body().clientTop;
}
document.mouse = {
"x": px,
"y": py
};
}
A Bug is still occurring.
I drag to the target (all is well.)
i drag from the target and a duplicate avatar is stuck on the screen.
firebug reports an error.
_5.getItem(_6[i].id) is undefined
} catch (e) {\r\n dojo.js (line 203)
could you offer any help?