drag a div from one iframe to another

[NorthStarDA]

hi,

i have a page with 2 iframes, the first iframe has a list of divs (instead of table rows), i would like to drag a div from 1 iframe to the other. I would also like to provide some visual feedback about what is being dragged. The div also needs to remain in its original spot so it can be dragged again.

I was thinking of duplicating the div on mousedown, then somehow attaching the new div (maybe with a filter over it) to the mouse cursor while dragging. If you mouseup over anywhere than the 'drop zone' then the duplicated div would just disappear.

I also need to make it cross browser, does that make sense and has anyone written a drag/drop this complex, or know of any resources where i can learn to do it?




=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[kaht]

I really don't think you can do that. I would consider getting rid of the iframes if possible (then your problem would be a snap), are they completely necessary?

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[NorthStarDA]

unfortunately they are, i'm working in a framework and i do not have the control to eliminate the iframes.

which part is the problem, showing what is being dragged? i had drag and drop working before with IE only solution between frames, minus the visual feedback. or is it making it cross browser that is the issue?


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[jemminger]

script.aculo.us has some drag-drop shopping cart demos, perhaps you'd like to take a look at/rip off some of their code ;-)

http://demo.script.aculo.us/shop

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[NorthStarDA]

ok, i think i have a good start at this, but the script works very well so far in firefox, but not in IE. I cannot get the drag to work properly in IE.

i found some of this script googling and finished up the rest of it, the script copies an image into a placeholder image/div in the parent page, then allows me to drag it.

<script language="JavaScript1.2" type="text/javascript">
var ie=document.all;
var ns6=document.getElementById&&!document.all;
var moving=false;
var x1,y1,mouseX,mouseY;

function startDrag(event) {
	//get the object being dragged
	var draggingElement=ns6? event.target : event.srcElement;
	//copy the image to the image placeholder on the parent page
	document.getElementById("z3").setAttribute("src",draggingElement.src);
	//get the xy coordinates of the dragging element
	x1 = findPosX(draggingElement);
	y1 = findPosY(draggingElement);
	//define the placeholder div
	placeHolderDiv = document.getElementById("item");
	//move the placeholder div to the same location as the dragging element
	placeHolderDiv.style.left = x1;
	placeHolderDiv.style.top = y1;
	//show the placeholder div
	document.getElementById("item").style.visibility='visible';
	//set the moving variable true
	moving = true;
	//document.onmousemove = moveit;
	top.onmousemove = moveit;
}

function moveit(e){
	if (moving) {
	    getMouse(e);
		div = document.getElementById("item");
		divcss = div.style; 
		divcss.top = mouseY - 36;
		divcss.left = mouseX - 49;
	}
    return false;
}

function getMouse(e){
    if(ie){
	mouseY = event.clientY + document.body.scrollTop;
	mouseX = event.clientX + document.body.scrollLeft;
    }
    else if(ns6){
	if (e == null && window.event)
	    e = window.event;
	if (e != null) {mouseY = e.pageY;mouseX = e.pageX;}
    }
}

function endDrag(event){
moving=false;
document.onmousemove=null;
document.onmouseup=null;
return false;
}

function findPosX(obj)
{
	var x1 = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			x1 += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		x1 += obj.x;
	return x1;
}

function findPosY(obj)
{
	var y1 = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			y1 += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		y1 += obj.y;
	return y1;
}
</script>

so here is the parent frame code

<body>
	<DIV id="item" name="item" class="z2">
	<img id="z3" border="0" src="" width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);-moz-opacity: 0.4;" onmouseup="endDrag(event);">
	</DIV>
	<DIV id="div2" name="div2" class="z" style="border:2px solid #FF0000; width:255; height:185">
	<iframe id="I2" name="I2" src="frameContent.cfm" width="240" height="175" border="0" frameborder="0" style="left:50px;top:50px;width:240px;background-color: #FFFFFF">
	Your browser does not support inline frames or is currently configured not to display inline frames.
	</iframe>
	</DIV>
</body>

then the code for the image i want to drag in the iframe

<img id="image1" name="image1" border="0" src="/images/blankEmployees.jpg" width="100" height="100" onmousedown="top.startDrag(event)" onmouseup="top.endDrag(event)">

can anyone see why IE would be giving me problems with this?


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[NorthStarDA]

the result can be seen here:

http://portal.northstarusa.net/test/

note the difference between firefox and IE


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison