如何处理页面上控件的拖动？？

Question

javascript 中 ondrag(?) 事件实现

Answer 1

seehttp://www.walterzorn.com/dragdrop/dragdrop_e.htmtry to drag the image around

Answer 2

(1) Recognizing the drag/drop events
Here's a link that deals with that.
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20111036.html
(2) you'll need to get that JavaScript into the web page.
Here's several methods to do it in .NET.
http://www.codeguru.com/net_asp/EmbeddingJava.html

Answer 3

这是我写的一个拖动<div>.</div>的脚本
var m_fMouseDown = false;
var m_fMouseMoved = false;
var m_cxOffset = 0;
var m_cyOffset = 0;
var m_prtSrc = null;
var m_prtDrag = null; function OnDocument_MouseDown()
{
var Element=event.srcElement;
if ((window.event.srcElement.className == 'Res') || ((Element.tagName=="DIV" )&& (Element.parentElement !=null) &&(Element.parentElement.offsetParent.id.indexOf("DragTable12345")!= -1)))
{
//把层的内容存入tempsave中
document.all("tempsave").value=Element.innerText;

m_fMouseDown = true;
document.all("m_fMouseDown").value=1; m_cxOffset = window.event.clientX - GetAbsoluteLeft(window.event.srcElement);
m_cyOffset = window.event.clientY - GetAbsoluteTop(window.event.srcElement); m_prtSrc = window.event.srcElement;
if(document.all("IsNodeChange").value==1)
{
m_prtDrag=document.createElement("div");
// m_prtDrag.id=m_prtSrc.id;
m_prtDrag.className=m_prtSrc.className;
m_prtDrag.innerText=m_prtSrc.innerText;
}
else
{
m_prtDrag = m_prtSrc.cloneNode(true);
} m_prtDrag.style.position = 'absolute';
m_prtDrag.style.filter = 'alpha(opacity=50)';
m_prtDrag.style.left = (window.event.x - m_cxOffset) + document.body.scrollLeft;;
m_prtDrag.style.top = (window.event.y - m_cyOffset) + document.body.scrollTop;
m_prtDrag.style.width = m_prtSrc.offsetWidth;
m_prtDrag.style.zIndex=0;
m_prtDrag.attachEvent("onmousemove",DivMouse_OnMouseMove);
document.body.insertAdjacentElement('beforeEnd', m_prtDrag); m_prtDrag.setCapture();
}


}
function DivMouse_OnMouseMove()
{
if (m_fMouseDown)
{
m_fMouseMoved = true;

m_prtDrag.style.left = window.event.clientX - m_cxOffset + document.body.scrollLeft;
m_prtDrag.style.top = window.event.clientY - m_cyOffset + document.body.scrollTop;

}        
}
function GetAbsoluteLeft(elem)
{
var leftPosition = 0;

while (elem)
{
if (elem.tagName == 'BODY')
{
break;
}
leftPosition += elem.offsetLeft;
elem = elem.offsetParent;
}
return leftPosition;
}
function GetAbsoluteTop(elem)
{
var topPosition = 0; while (elem)
{
if (elem.tagName == 'BODY')
{
break;
}
topPosition += elem.offsetTop;
elem = elem.offsetParent;
}
return topPosition;
}function DivMouse_OnMouseUp()
{
var Element=event.srcElement;
if((Element.tagName=="DIV" )&& (Element.parentElement.tagName=="TD") && (Element.parentElement.offsetParent.id.indexOf("DragTable12345")!= -1))
{
if(document.all("tempsave").value !=Element.innerText)
{
Element.fireEvent("onmouseup");
}
}
if (m_fMouseDown)
{
if (m_fMouseMoved)
{
m_fMouseMoved = false;
}
m_fMouseDown = false;
document.all("m_fMouseDown").value="0";
document.all("IsNodeChange").value="0";
}
//divMouse.releaseCapture();
if(m_prtDrag !=null)
m_prtDrag.removeNode(true);
//m_prtDrag.style.filter = 'alpha(opacity=100)';
}

function bodymouseup()
{
if (m_fMouseDown)
{
if (m_fMouseMoved)
{
m_fMouseMoved = false;
}
m_fMouseDown = false;
}
m_prtDrag.removeNode(true)
}