能实现在浏览器下支持鼠标的托拽功能吗？

基本上比较困难，不过javascript高手通过图层应该可以。search up

是肯定可以的，通过ondragstart,ondragleave,ondragend等等一些事件，通过fromElement,toElement,srcElement等等这些元素，以下是MSDN的示例-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>Example of Drag-and-Drop Event Firing</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/workshop/advSDKIE4.css" TYPE="text/css">
<SCRIPT>
var oNewOption;            // Code for dynamically adding options to a select.function ShowResults()
{                // Information about the events
                 // and what object fired them.
  arg = event.type + "  fired by  " + event.srcElement.id;
  oNewOption = new Option();
  oNewOption.text = arg;
  oResults.add(oNewOption,0);
}
</SCRIPT>
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
  MSHelp\:link {
    color:#0000ff;
    text-decoration:underline;
    cursor:hand;
    hoverColor:#3366ff;
    filterString: ;}
</STYLE>
</HEAD>


<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body"><H1>Example of Drag-and-Drop Event Firing</H1><P>Open a second window containing the same source code to
   watch event firing across browser windows. In that case,
   only source events will display in the list box in the
   window of origin, just as only target events will be
   listed in the target browser window.
</P>
<P>Source events are wired up to this text box.</P>
<INPUT ID="oSource" VALUE="Text to Drag"
     ondragstart="ShowResults()"
ondrag="ShowResults()"
ondragend="ShowResults()">
<BR>
<P>Target events are bound to this text box.</P>
<INPUT ID="oTarget" VALUE="Drag Destination"
     ondragenter="ShowResults()"
ondragover="ShowResults()"
ondragleave="ShowResults()"
ondrop="ShowResults()">
<HR>
<SELECT ID="oResults" SIZE=30>
  <OPTION>List of events fired, starting with the most recent
</SELECT>
<BR><BR><BR>
<MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">© 2003 Microsoft Corporation. All rights reserved.</MSHelp:link>.

</BLOCKQUOTE>
</BODY>
</HTML>

liuruhong大虾：
你的例子给了我很大的启示，不过我想另外实现一些功能：
比如：我有一个<input type="text" id="dragable_text">,能否实现dragable_text在浏览器中的拖动(就是说我用鼠标把他拖到哪儿他就摆在那个地方显示，像dreamweaver在设计时拖动控件那样)?
如果能，可否给我大致的操作步骤?

这个可以的吧，以下是一个一段代码，是WebFX的,你可以参考以下,只要你设置了你需要拖动元素class="moveme"就可以了，另外就是可以使用handle了///////////////////////////////////////////////////////////////////////
//     This script was designed by Erik Arvidsson for WebFX          //
//                                                                   //
//     For more info and examples see: http://webfx.eae.net          //
//     or contact Erik at http://webfx.eae.net/contact.html#erik     //
//                                                                   //
//     Feel free to use this code as lomg as this disclaimer is      //
//     intact.                                                       //
///////////////////////////////////////////////////////////////////////var checkZIndex = true;var dragobject = null;
var tx;
var ty;var ie5 = document.all != null && document.getElementsByTagName != null;function getReal(el) {
temp = el; while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)

if (el.className == "moveme" || el.className == "handle") {
if (el.className == "handle") {
tmp = el.getAttribute("handlefor");
if (tmp == null) {
dragobject = null;
return;
}
else
dragobject = eval(tmp);
}
else
dragobject = el;

if (checkZIndex) makeOnTop(dragobject);

ty = window.event.clientY - getTopPos(dragobject);
tx = window.event.clientX - getLeftPos(dragobject);

window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragobject = null;
}
}function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}function moveme_onmousemove() {
if (dragobject) {
if (window.event.clientX >= 0 && window.event.clientY >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}function getLeftPos(el) {
if (ie5) {
if (el.currentStyle.left == "auto")
return 0;
else
return parseInt(el.currentStyle.left);
}
else {
return el.style.pixelLeft;
}
}function getTopPos(el) {
if (ie5) {
if (el.currentStyle.top == "auto")
return 0;
else
return parseInt(el.currentStyle.top);
}
else {
return el.style.pixelTop;
}
}function makeOnTop(el) {
var daiz;
var max = 0;
var da = document.all;

for (var i=0; i<da.length; i++) {
daiz = da[i].style.zIndex;
if (daiz != "" && daiz > max)
max = daiz;
}

el.style.zIndex = max + 1;
}if (document.all) { //This only works in IE4 or better
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
}document.write("<style>");
document.write(".moveme {cursor: move;}");
document.write(".handle {cursor: move;}");
document.write("</style>");

调试易

能实现在浏览器下支持鼠标的托拽功能吗？

解决方案 »