托拽：两个浏览器之间可以实现脱拽么？

我没见过这样的web应用谁见过发给我个网址我见识一下

我哭了，该改试样了！！！
--------------------------------------
大家觉得这样可行么？
(比如w1的东西拖向w2)
1、w1中ondrag时，用一个全局变量纪录drag的目标id等；
2、w2中onmove时，判断w1中是否有drag的目标，如果有表示托拽状态，然后将w1的目标对出来！各位英雄，这样会有问题么？

拖滞时将拖滞元素的 HTML文本截取并且通过clipboardData.setData("text",HTML文本)存入剪切板
当到另外一个浏览器里面释放的时候记录释放位置在想办法把clipboardData.getData("text")将剪切板中的的数据提取出来放入新的窗口里面

TO: gzdiablo()
使用剪贴板，正如JK_10000(JK)所说，对用户来说可能有些别扭，不过确实是一个不错的实现方式！
我想问问，你认为我说的实现方法，可行么？
谢谢

基本思路：使用剪切板传递数据
FuWaer说明：可以实现，但从WebForm1中拖出到WebForm2中时，需要在WebForm2中松开鼠标才能显示（和预想的效果不一致）
演示文件：WebForm1.html WebForm2.html
WebForm1.html代码：
---------------------------------------------------------------------------------
<HTML>
<HEAD>
<title>WebForm1</title>
<script language="javascript">
    function init()
    {
window.document.body.attachEvent("onmouseover",bodyMouseOver);
window.document.body.attachEvent("onmouseout",bodyMouseOut);

drawDiv();
    }
    function drawDiv()
    {
var div = document.createElement(
    "<div id=div1 "+
    " style=FONT-SIZE:12px;LEFT:0px;WIDTH:100px;POSITION:absolute;TOP:0px;HEIGHT:60px;BACKGROUND-COLOR:yellow"+
    " onmousedown=mousedown()"+
    " onmousemove=mousemove()"+
    " onmouseup=mouseup()></div>");
div.innerHTML = "hello world";
document.body.appendChild(div);
    }

    var g_div1_tag = false;
    var g_div1_oldx = 0;
    var g_div1_oldy = 0;
    function mousedown()
    {
g_div1_tag = true;
g_div1_oldx = event.x;
g_div1_oldy = event.y;
    }
    function mousemove()
    {
if(g_div1_tag)
{
var x = event.x;
var y = event.y;
document.all.div1.style.pixelLeft += x - g_div1_oldx;
document.all.div1.style.pixelTop  += y - g_div1_oldy;
g_div1_oldx = x;
g_div1_oldy = y;
}
    }
    function mouseup()
    {
if(g_div1_tag)
{
g_div1_tag = false;
}
    }

    function bodyMouseOut()
    {
if(g_div1_tag)
{
g_div1_tag = false;

var relativeX = event.x - document.all.div1.style.pixelLeft;
var relativeY = event.y - document.all.div1.style.pixelTop;

var str = "";
str += "<context>";
str +=    "<from>FuWaer_WebForm1</from>";
str +=    "<relativeX>"+relativeX+"</relativeX>";
str +=    "<relativeY>"+relativeY+"</relativeY>";
str +=    "<objectId>"+document.all.div1.id+"</objectId>";
str +=    "<object>"+escape(document.all.div1.outerHTML)+"</object>";
str += "</context>";
clipboardData.setData("text",str);

document.body.removeChild(document.all.div1);

}
    }

    function bodyMouseOver()
    {

try
{
var str = clipboardData.getData("text");
var xmldoc = new ActiveXObject("MSXML2.DOMDocument");
xmldoc.loadXML(str);
var from = xmldoc.documentElement.childNodes[0].text;
if(from=="FuWaer_WebForm2")
{
var relativeX = xmldoc.documentElement.childNodes[1].text;
var relativeY = xmldoc.documentElement.childNodes[2].text;
var objectId = xmldoc.documentElement.childNodes[3].text;
var object = unescape(xmldoc.documentElement.childNodes[4].text);

clipboardData.clearData();

document.body.innerHTML += object;
var div = document.getElementById(objectId);
div.style.display = "none";
div.style.pixelLeft = event.x - relativeX;
div.style.pixelTop = event.y - relativeY;
div.style.display = "";

}
}
catch(e)
{
}
    }
</script>
</HEAD>
<body onload="init()">
</body>
</HTML>---------------------------------------------------------------------------------WebForm2.html
---------------------------------------------------------------------------------
<HTML>
<HEAD>
<title>WebForm2</title>
<script language="javascript">
    function init()
    {
window.document.body.attachEvent("onmouseover",bodyMouseOver);
window.document.body.attachEvent("onmouseout",bodyMouseOut);
    }    var g_div1_tag = false;
    var g_div1_oldx = 0;
    var g_div1_oldy = 0;
    function mousedown()
    {
g_div1_tag = true;
g_div1_oldx = event.x;
g_div1_oldy = event.y;
    }
    function mousemove()
    {
if(g_div1_tag)
{
var x = event.x;
var y = event.y;
document.all.div1.style.pixelLeft += x - g_div1_oldx;
document.all.div1.style.pixelTop  += y - g_div1_oldy;
g_div1_oldx = x;
g_div1_oldy = y;
}
    }
    function mouseup()
    {
if(g_div1_tag)
{
g_div1_tag = false;
}
    }
    function bodyMouseOut()
    {
if(g_div1_tag)
{
g_div1_tag = false;

var relativeX = event.x - document.all.div1.style.pixelLeft;
var relativeY = event.y - document.all.div1.style.pixelTop;

var str = "";
str += "<context>";
str +=    "<from>FuWaer_WebForm2</from>";
str +=    "<relativeX>"+relativeX+"</relativeX>";
str +=    "<relativeY>"+relativeY+"</relativeY>";
str +=    "<objectId>"+document.all.div1.id+"</objectId>";
str +=    "<object>"+escape(document.all.div1.outerHTML)+"</object>";
str += "</context>";
clipboardData.setData("text",str);

document.body.removeChild(document.all.div1);

}
    }

    function bodyMouseOver()
    {
try
{
var str = clipboardData.getData("text");
var xmldoc = new ActiveXObject("MSXML2.DOMDocument");
xmldoc.loadXML(str);
var from = xmldoc.documentElement.childNodes[0].text;
if(from=="FuWaer_WebForm1")
{
var relativeX = xmldoc.documentElement.childNodes[1].text;
var relativeY = xmldoc.documentElement.childNodes[2].text;
var objectId = xmldoc.documentElement.childNodes[3].text;
var object = unescape(xmldoc.documentElement.childNodes[4].text);

clipboardData.clearData();

document.body.innerHTML += object;
var div = document.getElementById(objectId);
div.style.display = "none";
div.style.pixelLeft = event.x - relativeX;
div.style.pixelTop = event.y - relativeY;
div.style.display = "";

}
}
catch(e)
{
}
    }
</script>
</HEAD>
<body onload="init()">
</body>
</HTML>---------------------------------------------------------------------------------

TO; FuWaer()非常感谢：）提供了很好的思路！
不过依然存在，问题就是托拽之后，剪贴板中数据就丢失了！
我改进一下！！！！

调试易

托拽：两个浏览器之间可以实现脱拽么？

解决方案 »