drag drop - zindex and cookies!

[wwfc]

Hi All,

Really need some help please.

I have some script that makes divs draggable - and the drag drop element works just great.

But I need the script to be able to change the z-index of the object that has been clicked/dragged to the highest z-index position and make it sit on top of all of the other divs.

Ideally if possible I would like to incorporate cookies to remember the layout too.

I have attached my files for your reference - be really grateful if anyone can help achieve this please.

Here's hoping ;-)

[Fang]

Either give it a very high value, i.e. 1000, or count the number of elements and use that value.

[wwfc]

hey Fang - thanks for the reply.

I did try using an onmousedown call :-
"onmousedown="MM_changeProp('cd2'','','zIndex',+555,'DIV')">
and an array of variations on the above - but none of them worked.

There will only be around 10-15 elements that will use it - but I thought if I just stick 555 - it will be more than plenty.

Is there any kinf of fail-safe z-index method that I could apply here?

***Crosses fingers and hopes so****

[Fang]

Has the position of the element been set to relative or absolute?

[wwfc]

...in the css it is set to absolute - should it be relative?

[Fang]

Either

[wwfc]

...lol! either? I thought you were about to introduce me to some handy little piece of knowledge!!! - my wife usually gives me answers like that!! - next thing you'll tell me that if I can't see why it doesn't work, "well, I'm not going to tell you!!!!"

Come on fang-a-roony! help a fella out!

[Fang]

Your not giving me anything to look at; give a link or working code.

[wwfc]

:o good point!

...okay - here is the html code:
http://pastebin.com/m365d30b3

and the css file that it calls in to set the positions of the div's:
http://pastebin.com/m47ba9ea1
with all of the positions set to absolute.

In the html it calls for four lots of js - I have attached these four to this thread.

Would you rather me drop them into pastebin too? No problem if you do.
...although this script seems to be the main drag control - and is called as enabledrag2:
// xEnableDrag2 r1, Copyright 2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xEnableDrag2(id,fS,fD,fE,x1,y1,x2,y2)
{
var b = null; // boundary element
if (typeof x1 != 'undefined' && !x2) {
b = xGetElementById(x1);
}
xEnableDrag(id,
function (el, x, y, ev) { // dragStart
if (b) { // get rect from current size of ele
x1 = xPageX(b);
y1 = xPageY(b);
x2 = x1 + b.offsetWidth;
y2 = y1 + b.offsetHeight;
}
if (fS) fS(el, x, y, ev);
},
function (el, dx, dy, ev) { // drag
var x = xPageX(el) + dx; // absolute coords of target
var y = xPageY(el) + dy;
var mx = ev.pageX; // absolute coords of mouse
var my = ev.pageY;
if (!(x < x1 || x + el.offsetWidth > x2) && !(mx < x1 || mx > x2)) {
el.style.left = (el.offsetLeft + dx) + 'px';
}
if (!(y < y1 || y + el.offsetHeight > y2) && !(my < y1 || my > y2)) {
el.style.top = (el.offsetTop + dy) + 'px';
}
if (fD) fD(el, dx, dy, ev);
},
function (el, x, y, ev) { // dragEnd
if (fE) fE(el, x, y, ev);
}
);
}

and this is enabledrag.js:

// xEnableDrag r7, Copyright 2002-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xEnableDrag(id,fS,fD,fE)
{
var mx = 0, my = 0, el = xGetElementById(id);
if (el) {
el.xDragEnabled = true;
xAddEventListener(el, 'mousedown', dragStart, false);
}
// Private Functions
function dragStart(e)
{
if (el.xDragEnabled) {
var ev = new xEvent(e);
xPreventDefault(e);
mx = ev.pageX;
my = ev.pageY;
xAddEventListener(document, 'mousemove', drag, false);
xAddEventListener(document, 'mouseup', dragEnd, false);
if (fS) {
fS(el, ev.pageX, ev.pageY, ev);
}
}
}
function drag(e)
{
var ev, dx, dy;
xPreventDefault(e);
ev = new xEvent(e);
dx = ev.pageX - mx;
dy = ev.pageY - my;
mx = ev.pageX;
my = ev.pageY;
if (fD) {
fD(el, dx, dy, ev);
}
else {
xMoveTo(el, el.offsetLeft + dx, el.offsetTop + dy);
}
}
function dragEnd(e)
{
var ev = new xEvent(e);
xPreventDefault(e);
xRemoveEventListener(document, 'mouseup', dragEnd, false);
xRemoveEventListener(document, 'mousemove', drag, false);
if (fE) {
fE(el, ev.pageX, ev.pageY, ev);
}
if (xEnableDrag.drop) {
xEnableDrag.drop(el, ev);
}
}
}

xEnableDrag.drops = []; // static property

I have tried various things to try and get the z-index to change when the drag starts but all I seem to achieve is the drag/drop stops working altogether - nnrrrgh! But that said I don't really know how to manipulate the js! :(

Is there anything that shouts out to you Fang?

Hope you can put this right for me amigo

[Fang]

// xEnableDrag r7, Copyright 2002-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xEnableDrag(id,fS,fD,fE)
{
var mx = 0, my = 0, el = xGetElementById(id);
if (el) {
el.xDragEnabled = true;
xAddEventListener(el, 'mousedown', dragStart, false);
}
// Private Functions
function dragStart(e)
{
if (el.xDragEnabled) {
el.style.zIndex=1000;
var ev = new xEvent(e);
xPreventDefault(e);
mx = ev.pageX;
my = ev.pageY;
xAddEventListener(document, 'mousemove', drag, false);
xAddEventListener(document, 'mouseup', dragEnd, false);
if (fS) {
fS(el, ev.pageX, ev.pageY, ev);
}
}
}
function drag(e)
{
var ev, dx, dy;
xPreventDefault(e);
ev = new xEvent(e);
dx = ev.pageX - mx;
dy = ev.pageY - my;
mx = ev.pageX;
my = ev.pageY;
if (fD) {
fD(el, dx, dy, ev);
}
else {
xMoveTo(el, el.offsetLeft + dx, el.offsetTop + dy);
}
}
function dragEnd(e)
{
el.style.zIndex=1;
var ev = new xEvent(e);
xPreventDefault(e);
xRemoveEventListener(document, 'mouseup', dragEnd, false);
xRemoveEventListener(document, 'mousemove', drag, false);
if (fE) {
fE(el, ev.pageX, ev.pageY, ev);
}
if (xEnableDrag.drop) {
xEnableDrag.drop(el, ev);
}
}
}

xEnableDrag.drops = []; // static property
It's a bit of a guess. I would advise you to ask the question in the api forum (http://www.cross-browser.com/forums/index.php)
I don't know how far you are with this project, but take a look at WalterZorn (http://www.walterzorn.com/dragdrop/dragdrop_e.htm) D&D lib. You can specify the z-index of objects.

[rnd me]

i have my dnd routine set up like this:

allZs = 1200; //as a global
// == == in the dnd code
elm.style.zIndex = allZs++


that way, the most recently clicked/moved one is on top, just like in the OS.
i have used z as high at 50,000; don't worry about running out.

[wwfc]

...thanks fang!!!! sooo very very close!!!! I altered that js you posted like this

// xEnableDrag r7, Copyright 2002-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xEnableDrag(id,fS,fD,fE)
{
var mx = 0, my = 0, el = xGetElementById(id);
if (el) {
el.xDragEnabled = true;
xAddEventListener(el, 'mousedown', dragStart, false);
}
// Private Functions
function dragStart(e)
{
if (el.xDragEnabled) {
el.style["z-index"]="+999";
var ev = new xEvent(e);
xPreventDefault(e);
mx = ev.pageX;
my = ev.pageY;
xAddEventListener(document, 'mousemove', drag, false);
xAddEventListener(document, 'mouseup', dragEnd, false);
if (fS) {
fS(el, ev.pageX, ev.pageY, ev);
}
}
}
function drag(e)
{
var ev, dx, dy;
xPreventDefault(e);
ev = new xEvent(e);
dx = ev.pageX - mx;
dy = ev.pageY - my;
mx = ev.pageX;
my = ev.pageY;
if (fD) {
fD(el, dx, dy, ev);
}
else {
xMoveTo(el, el.offsetLeft + dx, el.offsetTop + dy);
}
}
function dragEnd(e)
{
el.style["z-index"]="+1000";
var ev = new xEvent(e);
xPreventDefault(e);
xRemoveEventListener(document, 'mouseup', dragEnd, false);
xRemoveEventListener(document, 'mousemove', drag, false);
if (fE) {
fE(el, ev.pageX, ev.pageY, ev);
}
if (xEnableDrag.drop) {
xEnableDrag.drop(el, ev);
}
}
}

xEnableDrag.drops = []; // static property

but adding the + to the number doesn't seem to work as I hoped it would - I was hoping that adding +999 would make it jump 999 z levels - and +1000 would place 1000 levels above the original z position - but it doesn't work like that does it? how do I tell it that I want it to go up by so many levels not just go to z-index 999 on click and 1000 on drop?

You have nearly cracked with your "guess" you clever fella!

[Fang]

Tryel.style["z-index"]+=999;

[wwfc]

...that seems to do the job fang! - nice one indeed - I have wasted so many hours trying to suss it and you put me right in a few hours!!! Thankyou ;)

It seems to work more smoothly if I add quote marks to the number but it does now swap the depths. One further question - is there any way of declaring an absolute top level? I just realised whilst messing around with drags - that if I click and drag the same element say three times - for some reason (probably the zindex call) the next object I click needs to be clicked/dragged four times.

It makes sense that if something has been placed say 3 times 555 (or whatever) that makes it up on level 1665 - something I hadn't initially considered! :( is there any way of declaring the next available z-index level?

Sorry to be moving the goal posts a little - I am very grateful for your help this far my friend - very grateful ;)

[wwfc]

...also! (**dodges coffee cup thrown by a now irritated Fang) - do you know how I can integrate a cookie to remember the layout/positions of the dragged items? Hope I'm not pushing my luck too far here ;)

[Fang]

The z-index is automatically assigned to an element according to it's position in the generated document. The highest z-index==document.body.getElementsByTagName('*').length
It's important to move the element back to it's original level after dragging:function dragEnd(e)
{
el.style["z-index"]-=999;

A cookie is easy enough: http://www.quirksmode.org/js/cookies.html
Save the cookie data in an array or object.

[wwfc]

...okay - I kind of get that - but what if I want the last item dragged to always sit on the very top? or sit on the very top until the next item is dragged? is that possible or am I just making life more complicated than need be?

how do I strip that absolute top code into my existing js?
// xEnableDrag r7, Copyright 2002-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xEnableDrag(id,fS,fD,fE)
{
var mx = 0, my = 0, el = xGetElementById(id);
if (el) {
el.xDragEnabled = true;
xAddEventListener(el, 'mousedown', dragStart, false);
}
// Private Functions
function dragStart(e)
{
if (el.xDragEnabled) {
el.style["z-index"]+="999";
var ev = new xEvent(e);
xPreventDefault(e);
mx = ev.pageX;
my = ev.pageY;
xAddEventListener(document, 'mousemove', drag, false);
xAddEventListener(document, 'mouseup', dragEnd, false);
if (fS) {
fS(el, ev.pageX, ev.pageY, ev);
}
}
}
function drag(e)
{
var ev, dx, dy;
xPreventDefault(e);
ev = new xEvent(e);
dx = ev.pageX - mx;
dy = ev.pageY - my;
mx = ev.pageX;
my = ev.pageY;
if (fD) {
fD(el, dx, dy, ev);
}
else {
xMoveTo(el, el.offsetLeft + dx, el.offsetTop + dy);
}
}
function dragEnd(e)
{
el.style["z-index"]+="999";
var ev = new xEvent(e);
xPreventDefault(e);
xRemoveEventListener(document, 'mouseup', dragEnd, false);
xRemoveEventListener(document, 'mousemove', drag, false);
if (fE) {
fE(el, ev.pageX, ev.pageY, ev);
}
if (xEnableDrag.drop) {
xEnableDrag.drop(el, ev);
}
}
}

xEnableDrag.drops = []; // static property

...is it possible that instead of returning the dragged item to it's original position it can go to the absolute top then 1 down maybe? or is that just silliness?

[wwfc]

...for the cookies - I 'did' find something that worked in it's own context - this is what was placed in the html doc:
<script type="text/javascript">
var rememberPositionedInCookie = true;
var rememberPosition_cookieName = 'demo';
</script>

and this was within the additional js called in by the html doc:

/**************************************************************************************************** ********
(C) www.dhtmlgoodies.com, January 2006

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

**************************************************************************************************** ********/


if(!window.rememberPositionedInCookie)var rememberPositionedInCookie = false;
if(!window.rememberPosition_cookieName)var rememberPosition_cookieName = 'demo';


var dragObjArray = new Array();
var dragObjCloneArray = new Array();
var numericIdToBeDragged = false;
var dragDropTimer = -1;

var mouse_x;
var mouse_y;

var el_x;
var el_y;

var currentZIndex = 10000;
var dragableElementMoved = new Array();

var dragableContent_cookieString;
var dragableContent_cookieItems = new Array();


/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}


function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
}
return returnValue;
}

function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
}
return returnValue;
}

function initDragDropElement(e)
{
if(document.all)e = event;

if(document.all)e = event;
if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3) // defeat Safari bug
source = source.parentNode;
if(source.tagName.toLowerCase()=='input' || source.tagName.toLowerCase()=='textarea')return false;


numericIdToBeDragged = this.className.replace(/[^0-9]/g,'');
dragDropTimer=0;
mouse_x = e.clientX;
mouse_y = e.clientY;

currentZIndex = currentZIndex + 1;

dragObjCloneArray[numericIdToBeDragged].style.zIndex = currentZIndex;

if(!dragableElementMoved[numericIdToBeDragged]){
dragObjCloneArray[numericIdToBeDragged].style.top = getTopPos(dragObjArray[numericIdToBeDragged]) + 'px';
dragObjCloneArray[numericIdToBeDragged].style.left = getLeftPos(dragObjArray[numericIdToBeDragged]) + 'px';
}
el_x = dragObjCloneArray[numericIdToBeDragged].style.left.replace('px','')/1;
el_y = dragObjCloneArray[numericIdToBeDragged].style.top.replace('px','')/1;


timerDragDropElement();
return false;
}

function timerDragDropElement()
{
if(dragDropTimer>=0 && dragDropTimer<10){
dragDropTimer = dragDropTimer + 1;
setTimeout('timerDragDropElement()',5);
return;
}
if(dragDropTimer>=10){
if(dragObjCloneArray[numericIdToBeDragged].style.display=='none'){
dragObjArray[numericIdToBeDragged].style.visibility = 'hidden';
dragObjCloneArray[numericIdToBeDragged].style.display = 'block';
dragObjCloneArray[numericIdToBeDragged].style.visibility = 'visible';
dragObjCloneArray[numericIdToBeDragged].style.top = getTopPos(dragObjArray[numericIdToBeDragged]) + 'px';
dragObjCloneArray[numericIdToBeDragged].style.left = getLeftPos(dragObjArray[numericIdToBeDragged]) + 'px';
dragableElementMoved[numericIdToBeDragged] = true;
}
}
}

function cancelEvent()
{
return false;
}

function cancelSelectionEvent()
{
if(dragDropTimer>=0)return false;
return true;
}

function moveDragableElement(e)
{
if(document.all)e = event;
if(dragDropTimer<10)return;
dragObjCloneArray[numericIdToBeDragged].style.left = (e.clientX - mouse_x + el_x) + 'px';
dragObjCloneArray[numericIdToBeDragged].style.top = (e.clientY - mouse_y + el_y) + 'px';
}

function stop_dragDropElement()
{
dragDropTimer = -1;

if(rememberPositionedInCookie && dragObjCloneArray[numericIdToBeDragged]){
dragableContent_cookieItems['dragableElementClone' + numericIdToBeDragged] = [dragObjCloneArray[numericIdToBeDragged].style.left,dragObjCloneArray[numericIdToBeDragged].style.top,dragObjCloneArray[numericIdToBeDragged].style.zIndex];
}
if(rememberPositionedInCookie)createCookieString();
numericIdToBeDragged = false;
}

function createCookieString()
{
var stringToSave = '';
for(var prop in dragableContent_cookieItems){
if(stringToSave)stringToSave = stringToSave + '###';
stringToSave = stringToSave + prop + ',' + dragableContent_cookieItems[prop][0] + ',' + dragableContent_cookieItems[prop][1] + ',' + dragableContent_cookieItems[prop][2];
}
Set_Cookie(rememberPosition_cookieName,stringToSave,60000000);
}


function initdragableElements()
{
var dragableContent_cookieString = false;
if(rememberPositionedInCookie){
dragableContent_cookieString = Get_Cookie(rememberPosition_cookieName);
}
var tmpElements = new Array();
var allObjects = document.getElementsByTagName('*');
for(var no=0;no<allObjects.length;no++){
if(allObjects[no].className=='dragableElement'){
allObjects[no].style.cursor = 'move';
tmpElements[tmpElements.length] = allObjects[no];
}
}

for(var no=0;no<tmpElements.length;no++){
var el = tmpElements[no].cloneNode(true);
tmpElements[no].className='dragableElement' + no;
el.onmousedown = initDragDropElement;
el.className='dragableElementClone' + no;

el.style.position='absolute';
el.style.display='none';
el.style.visibility='hidden';

el.style.top = getTopPos(tmpElements[no]) + 'px';
el.style.left = getLeftPos(tmpElements[no]) + 'px';
tmpElements[no].parentNode.insertBefore(el,tmpElements[no]);
tmpElements[no].onmousedown = initDragDropElement;

dragObjArray[no] = tmpElements[no];
dragObjCloneArray[no] = el;
}

document.body.onmousemove = moveDragableElement;
document.body.onmouseup = stop_dragDropElement;
document.body.onselectstart = cancelSelectionEvent;
document.body.ondragstart = cancelEvent;

// Position cookie elements
if(dragableContent_cookieString){

var items = dragableContent_cookieString.split('###');
for(var no=0;no<items.length;no++){
var tokens = items[no].split(',');
dragableContent_cookieItems[tokens[0]] = [tokens[1] ,tokens[2],tokens[3]];
}
positionItemsFromCookie();
}
}

function positionItemsFromCookie()
{
for(var prop in dragableContent_cookieItems){
for(var no=0;no<dragObjCloneArray.length;no++){
if(dragObjCloneArray[no].className==prop){
dragableElementMoved[no] = true;
dragObjCloneArray[no].style.display='block';
dragObjArray[no].style.visibility = 'hidden';
dragObjCloneArray[no].style.visibility = 'visible';
dragObjCloneArray[no].style.left = dragableContent_cookieItems[prop][0];
dragObjCloneArray[no].style.top = dragableContent_cookieItems[prop][1];
dragObjCloneArray[no].style.zIndex = dragableContent_cookieItems[prop][2];
currentZIndex = Math.max(currentZIndex,dragableContent_cookieItems[prop][2]/1 + 1);

}
}
}
}

window.onload = initdragableElements;

but I don't know how or what needs to trimmed out or if this like trying to put diesel into an unleaded car - you know what I mean the principle is the same but the practice just breaks it! Is this along the right sort of lines?

[Fang]

...is it possible that instead of returning the dragged item to it's original position it can go to the absolute top then 1 down maybe?You want to save position in a cookie, the z-index would also need to be saved. With all these values in an array/object you can easily track the highest z-index an move an element accordingly.

[wwfc]

...easily! - I guess it is if you know what you are talking about - but this is my first dealing with such wizardry!

How do I do this Fangybaby?

[Fang]

Look at objects (http://www.w3schools.com/JS/js_objects.asp)

[rnd me]

don't want you to have to start over, but my drag and drop has permanence built-in. it is simple, fast, and compatible.
all you need to do to make an element dragable is send the element or it's ID to the dnd function. eg: dnd("myDiv");
i created it because i didn't need the kitchen-sink features and bloat of zorn's lib, and all the drag and drop script ive come across are poorly written. globals everywhere, old netscape code, you wouldn't believe how many ask the browser "are you IE?, are you IE?" every time the mouse moves a pixel... you can also wow you firends with the spiffy snap feature. consider it to be freeware, i wrote it, and i don't care what anyone does with it.


just copy the dnd function from the example page below, drop it into your script, call dnd in an onload, and bam! ready to go.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dan's dnd demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="boot()">

<div id='div1'>
drag me <b>(but not me)</b> around the screen then refresh
</div>


<script type='text/javascript'>

function boot(){
dnd.snap = 10; //optional snapTo (pixels)
dnd("div1")
}


function dnd(elm) {
IE=false; //@cc_on; IE=true;
var branch = "target";
if(IE){ branch="srcElement"; }
function el(tid) {return document.getElementById(tid);}
function getCookie(k) {var d = document.cookie || "";var pairs = d.split(k + "=");if (pairs && pairs[1]) {return unescape(pairs[1].split(";")[0]);}}
function setCookie(nm, valu) {var e2 = (new Date(2019, 1, 1)).toGMTString();document.cookie = nm + "=" + escape(valu) + "; expires=" + e2;}
if (!window.App) {App = {};}if (!drag.items) {drag.items = [];}if (!App.dndTags) {App.dndTags = {};}if (!App.Z) {App.Z = 12000;}if (elm.split) {elm2 = el(elm);} else {elm2 = elm;}if (!elm2.id) {var tgn = elm2.tagName.toLowerCase();if (!App.dndTags[tgn]) {App.dndTags[tgn] = 0;} else {App.dndTags[tgn]++;}elm2.id = tgn + App.dndTags[tgn];}void (elm2.style.cursor = "crosshair");var ds7 = elm2.style;if (!ds7.position) {ds7.position = "absolute";ds7.left = elm2.offsetLeft + "px";ds7.top = elm2.offsetTop + "px";}if (getCookie) {var od = getCookie(elm2.id);if (od) {try {oP = eval(od);} catch (yy) {oP = [ds7.left, ds7.top];}ds7.left = oP[0];ds7.top = oP[1];}}
function drag(d, e) {if (e[branch] != d ) { return true; }
var ds = d.style; if (!ds.position) {ds.position = "absolute"; ds.left = ds.left ? ds.left : xy(e) + "px"; ds.top = ds.top ? ds.top : xy(e, 1) + "px"; }
d.style.cursor = "move"; d.buc = d.style.borderColor; ds.borderColor = drag.hlColor; d.oldOpac = parseFloat(ds.opacity) || 1;
ds.opacity = ".7"; stop2 = 0;
var oX = parseInt(d.style.left), oY = parseInt(d.style.top), eX = xy(e, 0), eY = xy(e, 1), tX, tY, stop2;
function dragI(e) {if (!stop2) {ds.top = xy(e, 1) + oY - eY + "px";ds.left = xy(e) + oX - eX + "px";}}
document.onmousemove = dragI;
function mouseup3() {stop2 = 1;ds.cursor = "crosshair";ds.opacity = 1;if (parseInt(ds.left) < 1) {ds.left = "1px";}if (parseInt(ds.top) < 1) {ds.top = "1px";}if (drag.snap) {var dsl = parseInt(ds.left);var dst = parseInt(ds.top);var tfactor = parseInt(dsl % drag.snap);var toff = (parseInt(drag.snap / 2) > tfactor) ? tfactor : tfactor * -1;ds.left = (dsl - toff) + "px";var tfactor = dst % drag.snap;var toff = (parseInt(drag.snap / 2) > tfactor) ? tfactor : tfactor * -1;ds.top = dst - toff + "px";}if (setCookie) {setCookie(d.id, "['" + ds.left + "', '" + ds.top + "']");}drag.items[d.id] = [parseInt(ds.left), parseInt(ds.top)];var ocolr = d.buc || "transparent";if (ocolr === drag.hlColor) {ocolr = "transparent";}d.style.borderColor = ocolr;document.onmousemove = "";document.onmouseup = "";document.body.focus();}
document.onmouseup =mouseup3
return false;
}//end drag
drag.items[elm2.id] = [parseInt(ds7.left), parseInt(ds7.top)];
elm2.onmousedown = function (event2) {this.style.zIndex = App.Z++;drag(this, event2||event);return true;};
var xy = function (e, v) {return v ? e.pageY : e.pageX;}
if(IE){xy = function (e,v) { return (v?(event.clientY+document.body.scrollTop):(event.clientX)); } }
drag.hlColor="yellow";
if(dnd.snap){drag.snap=dnd.snap; }
}//end dnd

</script>


</body>
</html>

[wwfc]

...jeesh! now that is way over my head - or at least the first two readings of it!!

Is there no simpler way of recording the z-index and position with a cookie - or is that it? Sorry for being a persistent pain in the a*s - but I really want to get this running sweet - and these questions are relevant to doing it. Not just me being a serial questioner!!!

Is there a kindergarden equivalent?

...thanks for that rndme - I'm gonna havee a looky at that ;-)
Didn't see your post until I had posted that comment above - I was talking about fangs link ;)

[wwfc]

...ooh!yah!

that is nice! - but how would I apply it to more than one div? I just tried - first off cutting and pasting - and then creating new divs - but it stopped it working altogether :(

...I am the digital angel of death today! - keep killing things :(

[rnd me]

...ooh!yah!

that is nice! - but how would I apply it to more than one div? I just tried - first off cutting and pasting - and then creating new divs - but it stopped it working altogether :(

...I am the digital angel of death today! - keep killing things :(
make sure something like boot is called in <body onload="boot()".

to do multiple ones, simple call dnd on each element you wish to drag enable.
easiest way is to give each an id, and pass the id. you can also do it in a loop without using ids, but let's keep it simple for now.
ex:

function boot(){
dnd.snap = 10; //optional snapTo (pixels)
dnd("div1");
dnd("div2");
dnd("div3");
dnd("img1");

}

[wwfc]

...okay I'm getting the hang of it now!

That is well funky my friend!

Could I add it to my original html code? or will that just confuse things?

Also - I seem to be struggling to stop it highlighting all the other elements as I drag it around - is that just me being a gonk?

[wwfc]

...could it work with this:
http://pastebin.com/m365d30b3

and the css that goes with the above html
http://pastebin.com/m47ba9ea1


I don't mind going from the top again - it is just that this is not a million miles off what I am trying to achieve - and I could seem to get the drag working without retaining the "drag me" copy - can it be applied to named layers with an image in???

***crosses fingers and closes eyes***

[rnd me]

its slow right now, i will post you original page modified in a little bit...

about the selections : i noticed this sometimes, but havent taken the time to track it down. some pages dont do it, some do. i will see if there is anything i can do when i play with your orig.

[wwfc]

...ahh! that would brilliant if you could - really appreciate all the help I am getting on here - making things a lot easier to understand - I have spent the past couple of weeks trying to piece bits together that I have found around the net - but when you are not sure what you are dealing with it is often impossible to get anything to do what you want it to!!! So big thankyou! and plenty of good karma to you's ;)

Keep me posted rnd me - appreciate this

[rnd me]

ok, i didnt realize how large the page was before i offered.

i did play around with it, but it has a lot of stuff going on.
the version i found had the zindex wired into every div, which i had to replace.

i modified the dnd function slightly: clicking sub-elements of the master element now drags the element (before you had to drag the border.)

everything get piled upon everything else, and without your images, it very difficult to see what it will look like for you. for me, everything is kinda stacked up.

i also have other things to do, so i cant jump in fully. i will check back to see how goes it, but i dont know when that will be.


here is as far as i got on your orig:

edit - well, it wont fit, and i really got to go. i removed all the onmousedown=...s from all the tags, and did this:




<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="shortcut icon" href="favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>drag</title>

<style type="text/css">
body {
margin: 0px;
background-image: url();
} p { margin: 0; padding: 0;} a:link {color: #000000;}a:visited {color: #000000;}a:hover {color: #000000;}a:active {color: #000000;}.style2 {
font-family: "Courier New", Courier, monospace
}
</style>

<script type='text/javascript' rc='Scripts/AC_RunActiveContent.js'></script>

<script type='text/javascript'>






function dnd(elm) {
IE=false; //@cc_on; IE=true;
var branch = "target";
if(IE){ branch="srcElement"; }
function el(tid) {return document.getElementById(tid);}
function getCookie(k) {var d = document.cookie || "";var pairs = d.split(k + "=");if (pairs && pairs[1]) {return unescape(pairs[1].split(";")[0]);}}
function setCookie(nm, valu) {var e2 = (new Date(2019, 1, 1)).toGMTString();document.cookie = nm + "=" + escape(valu) + "; expires=" + e2;}
if (!window.App) {App = {};}if (!drag.items) {drag.items = [];}if (!App.dndTags) {App.dndTags = {};}if (!App.Z) {App.Z = 12000;}if (elm.split) {elm2 = el(elm);} else {elm2 = elm;}
if(!elm2){return;}
if (!elm2.id) {var tgn = elm2.tagName.toLowerCase();if (!App.dndTags[tgn]) {App.dndTags[tgn] = 0;} else {App.dndTags[tgn]++;}elm2.id = tgn + App.dndTags[tgn];}void (elm2.style.cursor = "crosshair");var ds7 = elm2.style;if (!ds7.position) {ds7.position = "absolute";ds7.left = elm2.offsetLeft + "px";ds7.top = elm2.offsetTop + "px";}if (getCookie) {var od = getCookie(elm2.id);if (od) {try {oP = eval(od);} catch (yy) {oP = [ds7.left, ds7.top];}ds7.left = oP[0];ds7.top = oP[1];}}
function drag(d, e) {

//if (e[branch] != d ) { return true; }
d.focus();
var ds = d.style; if (!ds.position) {ds.position = "absolute"; ds.left = ds.left ? ds.left : xy(e) + "px"; ds.top = ds.top ? ds.top : xy(e, 1) + "px"; }
d.style.cursor = "move"; d.buc = d.style.borderColor; ds.borderColor = drag.hlColor; d.oldOpac = parseFloat(ds.opacity) || 1;
ds.opacity = ".7"; stop2 = 0;
var oX = parseInt(d.style.left), oY = parseInt(d.style.top), eX = xy(e, 0), eY = xy(e, 1), tX, tY, stop2;
function dragI(e) {if (!stop2) {ds.top = xy(e, 1) + oY - eY + "px";ds.left = xy(e) + oX - eX + "px";}}
document.onmousemove = dragI;
function mouseup3() {stop2 = 1;ds.cursor = "crosshair";ds.opacity = 1;if (parseInt(ds.left) < 1) {ds.left = "1px";}if (parseInt(ds.top) < 1) {ds.top = "1px";}if (drag.snap) {var dsl = parseInt(ds.left);var dst = parseInt(ds.top);var tfactor = parseInt(dsl % drag.snap);var toff = (parseInt(drag.snap / 2) > tfactor) ? tfactor : tfactor * -1;ds.left = (dsl - toff) + "px";var tfactor = dst % drag.snap;var toff = (parseInt(drag.snap / 2) > tfactor) ? tfactor : tfactor * -1;ds.top = dst - toff + "px";}if (setCookie) {setCookie(d.id, "['" + ds.left + "', '" + ds.top + "']");}drag.items[d.id] = [parseInt(ds.left), parseInt(ds.top)];var ocolr = d.buc || "transparent";if (ocolr === drag.hlColor) {ocolr = "transparent";}d.style.borderColor = ocolr;document.onmousemove = "";document.onmouseup = "";document.body.focus();}
document.onmouseup =mouseup3
return false;
}//end drag
drag.items[elm2.id] = [parseInt(ds7.left), parseInt(ds7.top)];
elm2.onmousedown = function (event2) {this.style.zIndex = App.Z++;drag(this, event2||event);return true;};
var xy = function (e, v) {return v ? e.pageY : e.pageX;}
if(IE){xy = function (e,v) { return (v?(event.clientY+document.body.scrollTop):(event.clientX)); } }
drag.hlColor="yellow";
if(dnd.snap){drag.snap=dnd.snap; }
}//end dnd




window.onload = function()
{
dnd('mood');
dnd('ok');
dnd('colourpicker');
dnd('emailme');
dnd('marc');
dnd('new');
dnd('updated');
dnd('clipsm1');


dnd('clipsm2');
dnd('citybuilder');
dnd('selfportrait');
dnd('manystuff');
dnd('balaclava');
dnd('chick');
dnd('ab');
dnd('bubble');
dnd('leisure');
dnd('t2here');
dnd('t2discoball');
dnd('t2me');
dnd('t2leen');
dnd('t2skull');
dnd('t2dark');
dnd('darkhorse');
dnd('photoshop');
dnd('neenday');
dnd('wherever');
dnd('t2collider');
dnd('wetpaint');
dnd('wetpaint2');
dnd('desktop');
dnd('digitalclub');
dnd('unichef1');
dnd('unichef2');
dnd('killr');
dnd('polaroid');
dnd('emit');
dnd('sketch2');
dnd('sketch1');
dnd('imaginarysongs');
dnd('16bitgothic');
dnd('thumbnail');
dnd('delvaux');
dnd('copy');
dnd('playlist');
dnd('stuff');
dnd('textblog');
dnd('tex2');
dnd('idea');
dnd('id3');
dnd('skull');
dnd('bigbutton');
dnd('font1');
dnd('font2');
dnd('you');
dnd('access');
dnd('clouds1');
dnd('clouds2');
dnd('clouds3');
dnd('clouds4');
dnd('ideamachine');
dnd('dot');
dnd('environ1');
dnd('environ2');
dnd('internet');
dnd('eyes');
dnd('swans');
dnd('hotlink');
dnd('sticker1');
dnd('sticker2');
dnd('sticker3');
dnd('steven');
dnd('guitar');
dnd('artwork');
dnd('imagesinthesky');
dnd('madewithamac');
dnd('moreray');
dnd('del');
dnd('af1');
dnd('af2');
dnd('af3');
dnd('af4');
dnd('af5');
dnd('af6');
dnd('af7');
dnd('af8');
dnd('af9');
dnd('wysinwyg');
dnd('cd1');
dnd('cd2');
dnd('map');
dnd('balloon');
dnd('myspace');
dnd('mp31');
dnd('mp32');
dnd('mp33');
dnd('mario');
dnd('owl');
dnd('mp34');
dnd('cat');
dnd('tooth');
dnd('thumb');
dnd('am');
dnd('pm');
dnd('concept');
dnd('finding');
dnd('dvd');
dnd('damien');
dnd('search');
dnd('tonepoem');
dnd('info');
dnd('shirts');
dnd('dblclick');
dnd('marc');





}
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}



</script>


</head>
.....



btw, is that change prop from dreamweaver? its faily poor code, with the un-neccesary eval and all, surprised to see it.

[wwfc]

***looks embarrassed***

I forgot that the onmousedown was still in there - yep p*ss poor - but it was one of the attempts at getting it to work - but it is not something I would usually try - let alone paste up for the world to see/laugh at (delete as applicable) - I'll have a look at code - cheers rnd me - here's hoping you done the doo!
:)

[wwfc]

...I don't why but I can't that to work :(

Could you drop your version onto pastebin for me to try and see if that will work - my versions seem to have flipped out keep jumping back to their original position - I do manage to one or two - but I don't know what I'm not doing right that is stopping this from working successfully :(

[wwfc]

...or of you could change the code to show one or two layers/divs I will build it back up again - hope that is not being too cheeky ;)

[wwfc]

it seems to b the actual drag that is not playing ball - I dunno why but even when I set up a new doc - and start to recreate the divs - z-index is just grand - but dragging it is not working - what is it that I am not doing right here???

[wwfc]

:)

I got it part working yay!!!! - when I say part - I mean it all works apart from the highlighting/selection bit - I am really having trouble getting a clan drag on the elements :(

this is how the html looks now:
http://pastebin.com/m39be406d

z-index works a treat - it remembers the positions perfectly and everytime.

...but, if I drag the elements some of them will drag around the screen no worries and cleanly - but then the same element will drag a little way then it goes blue and stops dragging - is there something in the html that is causing this to happen? or is it onee of those things?

Could you see if you can suss it for me please rnd me? your code works like an absolute dream otherwise - so please don't think I am complaining - quite the opposite!

Just need a clean drag on all the elements...
:confused: :confused: :confused:

[rnd me]

i think you describe snapping.

you can set dnd.snap to removed the minor re-positioning. (i do this so that dragged elms can be easily lined up.

i cannot reproduce the highlight problems on my computer (win/ff3), so not sure what to do about it.

you can try replacing the dragI function in the middle of dnd with this:

function dragI(e) {if (!stop2) {ds.top = xy(e, 1) + oY - eY + "px";ds.left = xy(e) + oX - eX + "px"; d.focus(); }}

but since i cant see it, i cant tell if it does anything...

what browser gives you trouble?

[wwfc]

Morning! Sorry to still be banging on about this! Everything is working perfectly but I just can't seem to get the drag to work - I don't know if it is the snap value that is causing this - reason for saying this is that the dragged DIV can only be dragged a few pixels before it stops dragging and then highlights in blue.

I did wonder if it was because of using .pngs with transparency - but then when I dropped jpgs into it it still does the same thing :(
One format that seemed to have more success is if there is an swf in the div - the two that I had the swf in did drag more smoothly - but only if I dragged at the bottom and not in the area where the spacer div is.

I am trying to work on a mac - using both FF & safari - FF seemed to throw an even bigger wobbler! and the drag only managed to move by a couple of pixels before stopping and going blue.

Do you think that it might be that the draggable elements are actually layers that I have given DIV id's - that shouldn't make a difference should it? or would it?

It is very frustrating that this last bit is causing such problems as your code is sooo damn good - I really hope it is my fault that the drags are causing troubles - everything else is just dandy!

Does using layers/pngs cause any problems that you know of?

The other thing that I wondered about is that I am trying to stack them on top of one another to start with and the user is able to drag them around the stage and position them where ever they want them - so in theory they create the page layout to their own taste and liking.

Do you think you have the time to pass me some code that includes maybe two or three layers that I can use as a starting point - and then build it back up. I have attached an example of the kind of png that I am trying to use for this.

I know that you have many other things that you need to do but if you could find a couple of minutes that would b champion! What d'ya think?

[rnd me]

not sure where to begin here.
there's a lot of possibilities.

i don't have access to a mac test system, my debugging is done in vista, so perhaps that has something to do with it. that sounds more like an excuse than an explanation however.

complicating the problem is that i cannot recreate your page without the CSS, the images, and the other external scripts in-place. all of them could affect the drag and drop: missing images drastically alter the element's visual size, as does CSS, and other scripts might be conflicting with something in my code.


all i can see is a bunch of plain-text phrases; the alt-text of the img tags.

i can tell you a little more about how the dnd function works, in the hopes that i can enable you to fix it.

first off: dnd() is simple-minded. it tries to do as little as possible to reposistion elements around the screen. this enables the one argument coding later, but sacrifices customization found in larger dnd libraries.
its setup by default (and again complicaiton, not sure what you are using, i posted a slight modification of this) to move only when the original tag if clicked, not any child element. this lets you drag input controls around without breaking the functionality.


i cannot see you CSS, but perhaps you don't have much orig tag showing.
a div wrapper on an image could be one pixel thick, perhaps nothing, making it hard to hit, and rapidly toggling the move on/off when the border is crossed.

i can tell you anecdotally that on the pages Ive used this script on, certain CSS styles can make it much easier to use by increasing the target area of a mouse click. increasing the padding helps a lot. another trick is to use a border: 15px solid transparent; on the dnd'd elements: border and padding clicks count as the dnd'd element, and give a buffer for rapid mouse jerks to confuse the script, thus increasing performance.


so, if you could post/pm a live url i will take a look at it, but try restyling your elements a bit. i don't know what else i can do to help given the aforementioned problems.

if you cant "golive", i guess you could substitute:
- the current dnd function
-all your js code
- the content of your external stylesheet
- a list of urls where i can find copies of any external scripts in use.

whew! thats a lot of stuff, but i have to see the wires to defuse the bomb.

[wwfc]

he he he - I like that phrase - see the wires to defuse the bomb!!!

okay I have just sent you a pm - see what you think?

[rnd me]

here is a new copy of my code:


function dnd(elm) { //xbrowser drag and drop::ver 0.91, by dan davis
IE=false; //@cc_on; IE=true;
var branch = "target";
if(IE){ branch="srcElement"; }
function el(tid) {return document.getElementById(tid);}
function getCookie(k) {var d = document.cookie || "";var pairs = d.split(k + "=");if (pairs && pairs[1]) {return unescape(pairs[1].split(";")[0]);}}
function setCookie(nm, valu) {var e2 = (new Date(2019, 1, 1)).toGMTString();document.cookie = nm + "=" + escape(valu) + "; expires=" + e2;}
if (!window.App) {App = {};}if (!drag.items) {drag.items = [];}if (!App.dndTags) {App.dndTags = {};}if (!App.Z) {App.Z = 500;}if (elm.split) {elm2 = el(elm);} else {elm2 = elm;}
if(!elm2){return;}
if (!elm2.id) {var tgn = elm2.tagName.toLowerCase();if (!App.dndTags[tgn]) {App.dndTags[tgn] = 0;} else {App.dndTags[tgn]++;}elm2.id = tgn + App.dndTags[tgn];}void (elm2.style.cursor = "pointer");var ds7 = elm2.style;if (!ds7.position) {ds7.position = "absolute";ds7.left = elm2.offsetLeft + "px";ds7.top = elm2.offsetTop + "px";}
ds7.oldCursor = ds7.cursor || "";
if (getCookie) {var od = getCookie(elm2.id);if (od) {try {oP = eval(od);} catch (yy) {oP = [ds7.left, ds7.top];}ds7.left = oP[0];ds7.top = oP[1];}}

function drag(d, e) {
//if (e[branch] != d ) { return true; }
var ds = d.style; if (!ds.position) {ds.position = "absolute"; ds.left = ds.left ? ds.left : xy(e) + "px"; ds.top = ds.top ? ds.top : xy(e, 1) + "px"; }
d.style.cursor = "move"; d.buc = d.style.borderColor; ds.borderColor = drag.hlColor; d.oldOpac = parseFloat(ds.opacity) || 1;
ds.opacity = "1"; stop2 = 0;
var oX = parseInt(d.style.left), oY = parseInt(d.style.top), eX = xy(e, 0), eY = xy(e, 1), tX, tY, stop2;
function dragI(e) {
if (!stop2) {
ds.top = xy(e, 1) + oY - eY + "px";
ds.left = xy(e) + oX - eX + "px";
}
}
document.onmousemove = dragI;
function mouseup3() {
stop2 = 1;
ds.opacity = 1;
if (parseInt(ds.left) < 1) {
ds.left = "1px";
}
if (parseInt(ds.top) < 1) {
ds.top = "1px";
}
ds.cursor = ds.oldCursor || 'default';
if (setCookie) {
setCookie(d.id, "['" + ds.left + "', '" + ds.top + "']");
}
drag.items[d.id] = [parseInt(ds.left), parseInt(ds.top)];
var ocolr = d.buc || "transparent";
if (ocolr === drag.hlColor) {
ocolr = "transparent";
}
d.style.borderColor = ocolr;
document.onmousemove = "";
document.onmouseup = "";
document.body.focus();
}
document.onmouseup =mouseup3
return false;
}//end drag

drag.items[elm2.id] = [parseInt(ds7.left), parseInt(ds7.top)];

elm2.onmousedown = function (event2) {this.style.zIndex = App.Z++;drag(this, event2||event); return false;};

var xy = function (e, v) {return v ? e.pageY : e.pageX;}
if(IE){xy = function (e,v) { return (v?(event.clientY+document.body.scrollTop):(event.clientX)); } }
drag.hlColor="yellow";
}//end dnd