javascript拖放函数

Posted 2021-02-27
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript拖放函数相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--************************************************************************-->
<!--* Windows Demo                                                         *-->
<!--*                                                                      *-->
<!--* Copyright 2001 by Mike Hall                                          *-->
<!--* Please see http://www.brainjar.com for terms of use.                 *-->
<!--************************************************************************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>BrainJar.com: Windows Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  .lastLine {
    padding-left: 6em;
  }
</style>
<style type="text/css">
 
.window {
  background-color: #c0c0c0;
  border-color: #f0f0f0 #606060 #404040 #d0d0d0;
  border-style: solid;
  border-width: 2px;
  margin: 0px;
  padding: 2px;
  position: absolute;
  text-align: left;
  visibility: hidden;
}
 
.titleBar {
  background-color: #008080;
  cursor: default;
  color: #ffffff;
  font-family: "MS Sans Serif", "Arial", "Helvetica", sans-serif;
  font-size: 8pt;
  font-weight: bold;
  margin: 0px;
  padding: 2px 2px 2px .5em;
  text-align: right;
  white-space: nowrap;
}
 
.titleBarText {
  float: left;
  overflow: hidden;
  text-align: left;
}
 
.titleBarButtons {
  border-style: none;
  border-width: 0px;
  vertical-align: middle;
  width: 50px;
  height: 14px;
}
 
.clientArea {
  background-color: #ffffff;
  border-color: #404040 #e0e0e0 #f0f0f0 #505050;
  border-style: solid;
  border-width: 2px;
  color: #000000;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10pt;
  margin: 2px 0px 0px 0px;
  overflow: auto;
  padding: .5em;
}
 
</style>
 
<script type="text/javascript">//<![CDATA[
 
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************
 
// Determine browser and version.
 
function Browser() {
 
  var ua, s, i;
 
  this.isIE    = false;  // Internet Explorer
  this.isNS    = false;  // Netscape
  this.version = null;
 
  ua = navigator.userAgent;
 
  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
 
  // Treat any other "Gecko" browser as NS 6.1.
 
  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}
 
var browser = new Browser();
 
//=============================================================================
// Window Object
//=============================================================================
 
function Window(el) {
 
  var i, mapList, mapName;
 
  // Get window components.
 
  this.frame           = el;
  this.titleBar        = winFindByClassName(el, "titleBar");
  this.titleBarText    = winFindByClassName(el, "titleBarText");
  this.titleBarButtons = winFindByClassName(el, "titleBarButtons");
  this.clientArea      = winFindByClassName(el, "clientArea");
 
  // Find matching button image map.
 
  mapName = this.titleBarButtons.useMap.substr(1);
  mapList = document.getElementsByTagName("MAP");
  for (i = 0; i < mapList.length; i++)
    if (mapList[i].name == mapName)
      this.titleBarMap = mapList[i];
 
  // Save colors.
 
  this.activeFrameBackgroundColor  = this.frame.style.backgroundColor;
  this.activeFrameBorderColor      = this.frame.style.borderColor;
  this.activeTitleBarColor         = this.titleBar.style.backgroundColor;
  this.activeTitleTextColor        = this.titleBar.style.color;
  this.activeClientAreaBorderColor = this.clientArea.style.borderColor;
  if (browser.isIE)
    this.activeClientAreaScrollbarColor = this.clientArea.style.scrollbarBaseColor;
 
  // Save images.
 
  this.activeButtonsImage   = this.titleBarButtons.src;
  this.inactiveButtonsImage = this.titleBarButtons.longDesc;
 
  // Set flags.
 
  this.isOpen      = false;
  this.isMinimized = false;
 
  // Set methods.
 
  this.open       = winOpen;
  this.close      = winClose;
  this.minimize   = winMinimize;
  this.restore    = winRestore;
  this.makeActive = winMakeActive;
 
  // Set up event handling.
 
  this.frame.parentWindow = this;
  this.frame.onmousemove  = winResizeCursorSet;
  this.frame.onmouseout   = winResizeCursorRestore;
  this.frame.onmousedown  = winResizeDragStart;
 
  this.titleBar.parentWindow = this;
  this.titleBar.onmousedown  = winMoveDragStart;
 
  this.clientArea.parentWindow = this;
  this.clientArea.onclick      = winClientAreaClick;
 
  for (i = 0; i < this.titleBarMap.childNodes.length; i++)
    if (this.titleBarMap.childNodes[i].tagName == "AREA")
      this.titleBarMap.childNodes[i].parentWindow = this;
 
  // Calculate the minimum width and height values for resizing
  // and fix any initial display problems.
 
  var initLt, initWd, w, dw;
 
  // Save the inital frame width and position, then reposition
  // the window.
 
  initLt = this.frame.style.left;
  initWd = parseInt(this.frame.style.width);
  this.frame.style.left = -this.titleBarText.offsetWidth + "px";
 
  // For IE, start calculating the value to use when setting
  // the client area width based on the frame width.
 
  if (browser.isIE) {
    this.titleBarText.style.display = "none";
    w = this.clientArea.offsetWidth;
    this.widthDiff = this.frame.offsetWidth - w;
    this.clientArea.style.width = w + "px";
    dw = this.clientArea.offsetWidth - w;
    w -= dw;     
    this.widthDiff += dw;
    this.titleBarText.style.display = "";
  }
 
  // Find the difference between the frame's style and offset
  // widths. For IE, adjust the client area/frame width
  // difference accordingly.
 
  w = this.frame.offsetWidth;
  this.frame.style.width = w + "px";
  dw = this.frame.offsetWidth - w;
  w -= dw;     
  this.frame.style.width = w + "px";
  if (browser.isIE)
    this.widthDiff -= dw;
 
  // Find the minimum width for resize.
 
  this.isOpen = true;  // Flag as open so minimize call will work.
  this.minimize();
  // Get the minimum width.
  if (browser.isNS && browser.version >= 1.2)
    // For later versions of Gecko.
    this.minimumWidth = this.frame.offsetWidth;
  else
    // For all others.
    this.minimumWidth = this.frame.offsetWidth - dw;
 
  // Find the frame width at which or below the title bar text will
  // need to be clipped.
 
  this.titleBarText.style.width = "";
  this.clipTextMinimumWidth = this.frame.offsetWidth - dw;
 
  // Set the minimum height.
 
  this.minimumHeight = 1;
 
  // Restore window. For IE, set client area width.
 
  this.restore();
  this.isOpen = false;  // Reset flag.
  initWd = Math.max(initWd, this.minimumWidth);
  this.frame.style.width = initWd + "px";
  if (browser.isIE)
    this.clientArea.style.width = (initWd - this.widthDiff) + "px";
 
  // Clip the title bar text if needed.
 
  if (this.clipTextMinimumWidth >= this.minimumWidth)
    this.titleBarText.style.width = (winCtrl.minimizedTextWidth + initWd - this.minimumWidth) + "px";
 
  // Restore the window to its original position.
 
  this.frame.style.left = initLt;
}
 
//=============================================================================
// Window Methods
//=============================================================================
 
function winOpen() {
 
  if (this.isOpen)
    return;
 
  // Restore the window and make it visible.
 
  this.makeActive();
  this.isOpen = true;
  if (this.isMinimized)
    this.restore();
  this.frame.style.visibility = "visible";
}
 
function winClose() {
 
  // Hide the window.
 
  this.frame.style.visibility = "hidden";
  this.isOpen = false;
}
 
function winMinimize() {
 
  if (!this.isOpen || this.isMinimized)
    return;
 
  this.makeActive();
 
  // Save current frame and title bar text widths.
 
  this.restoreFrameWidth = this.frame.style.width;
  this.restoreTextWidth = this.titleBarText.style.width;
 
  // Disable client area display.
 
  this.clientArea.style.display = "none";
 
  // Minimize frame and title bar text widths.
 
  if (this.minimumWidth)
    this.frame.style.width = this.minimumWidth + "px";
  else
    this.frame.style.width = "";
  this.titleBarText.style.width = winCtrl.minimizedTextWidth + "px";
 
  this.isMinimized = true;
}
 
function winRestore() {
 
  if (!this.isOpen || !this.isMinimized)
    return;
 
  this.makeActive();
 
  // Enable client area display.
 
  this.clientArea.style.display = "";
 
  // Restore frame and title bar text widths.
 
  this.frame.style.width = this.restoreFrameWidth;
  this.titleBarText.style.width = this.restoreTextWidth;
 
  this.isMinimized = false;
}
 
function winMakeActive() {
 
  if (winCtrl.active == this)
    return;
 
  // Inactivate the currently active window.
 
  if (winCtrl.active) {
    winCtrl.active.frame.style.backgroundColor    = winCtrl.inactiveFrameBackgroundColor;
    winCtrl.active.frame.style.borderColor        = winCtrl.inactiveFrameBorderColor;
    winCtrl.active.titleBar.style.backgroundColor = winCtrl.inactiveTitleBarColor;
    winCtrl.active.titleBar.style.color           = winCtrl.inactiveTitleTextColor;
    winCtrl.active.clientArea.style.borderColor   = winCtrl.inactiveClientAreaBorderColor;
    if (browser.isIE)
      winCtrl.active.clientArea.style.scrollbarBaseColor = winCtrl.inactiveClientAreaScrollbarColor;
    if (browser.isNS && browser.version < 6.1)
      winCtrl.active.clientArea.style.overflow = "hidden";
    if (winCtrl.active.inactiveButtonsImage)
      winCtrl.active.titleBarButtons.src = winCtrl.active.inactiveButtonsImage;
  }
 
  // Activate this window.
 
  this.frame.style.backgroundColor    = this.activeFrameBackgroundColor;
  this.frame.style.borderColor        = this.activeFrameBorderColor;
  this.titleBar.style.backgroundColor = this.activeTitleBarColor;
  this.titleBar.style.color           = this.activeTitleTextColor;
  this.clientArea.style.borderColor   = this.activeClientAreaBorderColor;
  if (browser.isIE)
    this.clientArea.style.scrollbarBaseColor = this.activeClientAreaScrollbarColor;
  if (browser.isNS && browser.version < 6.1)
    this.clientArea.style.overflow = "auto";
  if (this.inactiveButtonsImage)
    this.titleBarButtons.src = this.activeButtonsImage;
  this.frame.style.zIndex = ++winCtrl.maxzIndex;
  winCtrl.active = this;
}
 
//=============================================================================
// Event handlers.
//=============================================================================
 
function winClientAreaClick(event) {
 
  // Make this window the active one.
 
  this.parentWindow.makeActive();
}
 
//-----------------------------------------------------------------------------
// Window dragging.
//-----------------------------------------------------------------------------
 
function winMoveDragStart(event) {
 
  var target;
  var x, y;
 
  if (browser.isIE)
    target = window.event.srcElement.tagName;
  if (browser.isNS)
    target = event.target.tagName;
 
  if (target == "AREA")
    return;
 
  this.parentWindow.makeActive();
 
  // Get cursor offset from window frame.
 
  if (browser.isIE) {
    x = window.event.x;
    y = window.event.y;
  }
  if (browser.isNS) {
    x = event.pageX;
    y = event.pageY;
  }
  winCtrl.xOffset = winCtrl.active.frame.offsetLeft - x;
  winCtrl.yOffset = winCtrl.active.frame.offsetTop  - y;
 
  // Set document to capture mousemove and mouseup events.
 
  if (browser.isIE) {
    document.onmousemove = winMoveDragGo;
    document.onmouseup   = winMoveDragStop;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", winMoveDragGo,   true);
    document.addEventListener("mouseup",   winMoveDragStop, true);
    event.preventDefault();
  }
 
  winCtrl.inMoveDrag = true;
}
 
function winMoveDragGo(event) {
 
  var x, y;
 
  if (!winCtrl.inMoveDrag)
    return;
 
  // Get cursor position.
 
  if (browser.isIE) {
    x = window.event.x;
    y = window.event.y;
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    x = event.pageX;
    y = event.pageY;
    event.preventDefault();
  }
 
  // Move window frame based on offset from cursor.
 
  winCtrl.active.frame.style.left = (x + winCtrl.xOffset) + "px";
  winCtrl.active.frame.style.top  = (y + winCtrl.yOffset) + "px";
}
 
function winMoveDragStop(event) {
 
  winCtrl.inMoveDrag = false;
 
  // Remove mousemove and mouseup event captures on document.
 
  if (browser.isIE) {
    document.onmousemove = null;
    document.onmouseup   = null;
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", winMoveDragGo,   true);
    document.removeEventListener("mouseup",   winMoveDragStop, true);
  }
}
 
//-----------------------------------------------------------------------------
// Window resizing.
//-----------------------------------------------------------------------------
 
function winResizeCursorSet(event) {
 
  var target;
  var xOff, yOff;
 
  if (this.parentWindow.isMinimized || winCtrl.inResizeDrag)
    return;
 
  // If not on window frame, restore cursor and exit.
 
  if (browser.isIE)
    target = window.event.srcElement;
  if (browser.isNS)
    target = event.target;
  if (target != this.parentWindow.frame)
    return;
 
  // Find resize direction.
 
  if (browser.isIE) {
    xOff = window.event.offsetX;
    yOff = window.event.offsetY;
  }
  if (browser.isNS) {
    xOff = event.layerX;
    yOff = event.layerY;
  }
  winCtrl.resizeDirection = ""
  if (yOff <= winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "n";
  else if (yOff >= this.parentWindow.frame.offsetHeight - winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "s";
  if (xOff <= winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "w";
  else if (xOff >= this.parentWindow.frame.offsetWidth - winCtrl.resizeCornerSize)
    winCtrl.resizeDirection += "e";
 
  // If not on window edge, restore cursor and exit.
 
  if (winCtrl.resizeDirection == "") {
    this.onmouseout(event);
    return;
  }
 
  // Change cursor.
 
  if (browser.isIE)
    document.body.style.cursor = winCtrl.resizeDirection + "-resize";
  if (browser.isNS)
    this.parentWindow.frame.style.cursor = winCtrl.resizeDirection + "-resize";
}
 
function winResizeCursorRestore(event) {
 
  if (winCtrl.inResizeDrag)
    return;
 
  // Restore cursor.
 
  if (browser.isIE)
    document.body.style.cursor = "";
  if (browser.isNS)
    this.parentWindow.frame.style.cursor = "";
}
 
function winResizeDragStart(event) {
 
  var target;
 
  // Make sure the event is on the window frame.
 
  if (browser.isIE)
    target = window.event.srcElement;
  if (browser.isNS)
    target = event.target;
  if (target != this.parentWindow.frame)
    return;
 
  this.parentWindow.makeActive();
 
  if (this.parentWindow.isMinimized)
    return;
 
  // Save cursor position.
 
  if (browser.isIE) {
    winCtrl.xPosition = window.event.x;
    winCtrl.yPosition = window.event.y;
  }
  if (browser.isNS) {
    winCtrl.xPosition = event.pageX;
    winCtrl.yPosition = event.pageY;
  }
 
  // Save window frame position and current window size.
 
  winCtrl.oldLeft   = parseInt(this.parentWindow.frame.style.left,  10);
  winCtrl.oldTop    = parseInt(this.parentWindow.frame.style.top,   10);
  winCtrl.oldWidth  = parseInt(this.parentWindow.frame.style.width, 10);
  winCtrl.oldHeight = parseInt(this.parentWindow.clientArea.style.height, 10);
 
  // Set document to capture mousemove and mouseup events.
 
  if (browser.isIE) {
    document.onmousemove = winResizeDragGo;
    document.onmouseup   = winResizeDragStop;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", winResizeDragGo,   true);
    document.addEventListener("mouseup"  , winResizeDragStop, true);
    event.preventDefault();
  }
 
  winCtrl.inResizeDrag = true;
}
 
function winResizeDragGo(event) {
 
 var north, south, east, west;
 var dx, dy;
 var w, h;
 
  if (!winCtrl.inResizeDrag)
    return;
 
  // Set direction flags based on original resize direction.
 
  north = false;
  south = false;
  east  = false;
  west  = false;
  if (winCtrl.resizeDirection.charAt(0) == "n")
    north = true;
  if (winCtrl.resizeDirection.charAt(0) == "s")
    south = true;
  if (winCtrl.resizeDirection.charAt(0) == "e" || winCtrl.resizeDirection.charAt(1) == "e")
    east = true;
  if (winCtrl.resizeDirection.charAt(0) == "w" || winCtrl.resizeDirection.charAt(1) == "w")
    west = true;
 
  // Find change in cursor position.
 
  if (browser.isIE) {
    dx = window.event.x - winCtrl.xPosition;
    dy = window.event.y - winCtrl.yPosition;
  }
  if (browser.isNS) {
    dx = event.pageX - winCtrl.xPosition;
    dy = event.pageY - winCtrl.yPosition;
  }
 
  // If resizing north or west, reverse corresponding amount.
 
  if (west)
    dx = -dx;
  if (north)
    dy = -dy;
 
  // Check new size.
 
  w = winCtrl.oldWidth  + dx;
  h = winCtrl.oldHeight + dy;
  if (w <= winCtrl.active.minimumWidth) {
    w = winCtrl.active.minimumWidth;
    dx = w - winCtrl.oldWidth;
  }
  if (h <= winCtrl.active.minimumHeight) {
    h = winCtrl.active.minimumHeight;
    dy = h - winCtrl.oldHeight;
  }
 
  // Resize the window. For IE, keep client area and frame widths in synch.
 
  if (east || west) {
    winCtrl.active.frame.style.width = w + "px";
    if (browser.isIE)
      winCtrl.active.clientArea.style.width = (w - winCtrl.active.widthDiff) + "px";
  }
  if (north || south)
    winCtrl.active.clientArea.style.height = h + "px";
 
  // Clip the title bar text, if necessary.
 
  if (east || west) {
    if (w < winCtrl.active.clipTextMinimumWidth)
      winCtrl.active.titleBarText.style.width = (winCtrl.minimizedTextWidth + w - winCtrl.active.minimumWidth) + "px";
    else
      winCtrl.active.titleBarText.style.width = "";
  }
 
  // For a north or west resize, move the window.
 
  if (west)
    winCtrl.active.frame.style.left = (winCtrl.oldLeft - dx) + "px";
  if (north)
    winCtrl.active.frame.style.top  = (winCtrl.oldTop  - dy) + "px";
 
  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}
 
function winResizeDragStop(event) {
 
  winCtrl.inResizeDrag = false;
 
  // Remove mousemove and mouseup event captures on document.
 
  if (browser.isIE) {
    document.onmousemove = null;
    document.onmouseup   = null;
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", winResizeDragGo,   true);
    document.removeEventListener("mouseup"  , winResizeDragStop, true);
  }
}
 
//=============================================================================
// Utility functions.
//=============================================================================
 
function winFindByClassName(el, className) {
 
  var i, tmp;
 
  if (el.className == className)
    return el;
 
  // Search for a descendant element assigned the given class.
 
  for (i = 0; i < el.childNodes.length; i++) {
    tmp = winFindByClassName(el.childNodes[i], className);
    if (tmp != null)
      return tmp;
  }
 
  return null;
}
 
//=============================================================================
// Initialization code.
//=============================================================================
 
var winList = new Array();
var winCtrl = new Object();
 
function winInit() {
 
  var elList;
 
  // Initialize window control object.
 
  winCtrl.maxzIndex                        =   0;
  winCtrl.resizeCornerSize                 =  16;
  winCtrl.minimizedTextWidth               = 100;
  winCtrl.inactiveFrameBackgroundColor     = "#c0c0c0";
  winCtrl.inactiveFrameBorderColor         = "#f0f0f0 #505050 #404040 #e0e0e0";
  winCtrl.inactiveTitleBarColor            = "#808080";
  winCtrl.inactiveTitleTextColor           = "#c0c0c0";
  winCtrl.inactiveClientAreaBorderColor    = "#404040 #e0e0e0 #f0f0f0 #505050";
  winCtrl.inactiveClientAreaScrollbarColor = "";
  winCtrl.inMoveDrag                       = false;
  winCtrl.inResizeDrag                     = false;
 
  // Initialize windows and build list.
 
  elList = document.getElementsByTagName("DIV");
  for (var i = 0; i < elList.length; i++)
    if (elList[i].className == "window")
      winList[elList[i].id] = new Window(elList[i]);
}
 
window.onload = winInit;  // run initialization code after page loads.
 
//]]></script>
</head>
<body>
 
<!-- Normal page content. -->
 
<div id="demoBox">
 
<h3>Windows Demo</h3>
 
<p>This page contains three sample windows which can be opened using the links
below.</p>
 
<p>
<a href="" onclick="if (winList['sample1']) winList['sample1'].open(); return false;">Window 1</a>
 
|
<a href="" onclick="if (winList['sample2']) winList['sample2'].open(); return false;">Window 2</a>
|
<a href="" onclick="if (winList['sample3']) winList['sample3'].open(); return false;">Window 3</a>
</p>
 
<p>The first two use the default window style while the third demonstrates how
an individual window can be customized. Use your browser's
<code>View Source</code> option to see the full source code.</p>
 
</div>
 
<!-- Sample Window 1 -->
 
<div id="sample1" class="window" style="left:50px;top:150px;width:480px;">
  <div class="titleBar">
    <span class="titleBarText">The Raven</span>
    <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap1" width="50" height="14" />
    <map id="sampleMap1" name="sampleMap1">
      <area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
      <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />
      <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />
 
    </map>
  </div>
  <div class="clientArea" style="height:200px;">
 
  <h3>The Raven</h3>
 
  <p>Once upon a midnight dreary, while I pondered, weak and weary<br />
  Over many a quaint and curious volume of forgotten lore-<br />
 
  While I nodded, nearly napping, suddenly there came a tapping<br />
  As of some one gently rapping, rapping at my chamber door<br />
  "'T is some visitor," I muttered, "tapping at my chamber door-<br />
  <span class="lastLine">Only this and nothing more."</span></p>
 
  <p>Ah, distinctly I remember it was in the bleak December;<br />
  And each separate dying ember wrought its ghost upon the floor.<br />
 
  Eagerly I wished the morrow;-vainly I had sought to borrow<br />
  From my books surcease of sorrow-sorrow for the lost Lenore-<br />
  For the rare and radiant maiden whom the angels name Lenore-<br />
  <span class="lastLine">Nameless here for evermore.</span></p>
 
  <p>Then the silken, sad, uncertain rustling of each purple curtain<br />
  Thrilled me-filled me with fantastic terrors never felt before;<br />
 
  So that now, to still the beating of my heart, I stood repeating,<br />
  "'T is some visitor entreating entrance at my chamber door-<br />
  Some late visitor entreating entrance at my chamber door;-<br />
  <span class="lastLine">This it is and nothing more."</span></p>
 
  <p>Presently my soul grew stronger; hesitating then no longer,<br />
  "Sir," said I, "or Madam, truly your forgiveness I implore;<br />
 
  But the fact is I was napping, and so gently you came rapping,<br />
  And so faintly you came tapping, tapping at my chamber door,<br />
  That I scarce was sure I heard you"-here I opened wide the door;-<br />
  <span class="lastLine">Darkness there and nothing more."</span></p>
 
  <p>Deep into that darkness peering, long I stood there wondering, fearing,<br />
  Doubting, dreaming dreams no mortal ever dared to dream before;<br />
 
  But the silence was unbroken, and the stillness gave no token,<br />
  And the only word there spoken was the whispered word, "Lenore?"<br />
  This I whispered, and an echo murmured back the word, "Lenore!"<br />
  <span class="lastLine">Merely this and nothing more.</span></p>
 
  <p>Back into the chamber turning, all my soul within me burning,<br />
  Soon again I heard a tapping somewhat louder than before.<br />
 
  "Surely," said I, "surely that is something at my window lattice;<br />
  Let me see, then, what thereat is, and this mystery explore-<br />
  Let my heart be still a moment and this mystery explore;-<br />
  <span class="lastLine">'T is the wind and nothing more!"</span></p>
 
  <p>Open here I flung the shutter, when, with many a flirt and flutter,<br />
  In there stepped a stately Raven of the saintly days of yore;<br />
 
  Not the least obeisance made he; not a minute stopped or stayed he;<br />
  But, with mien of lord or lady, perched above my chamber door-<br />
  Perched upon a bust of Pallas just above my chamber door-<br />
  <span class="lastLine">Perched, and sat, and nothing more.</span></p>
 
  <p>Then this ebony bird beguiling my sad fancy into smiling,<br />
  By the grave and stern decorum of the countenance it wore,<br />
 
  "Though thy crest be shorn and shaven, thou," I said,"art sure no craven,<br />
  Ghastly grim and ancient Raven wandering from the Nightly shore-<br />
  Tell me what they lordly name is on the Night's Plutonian shore!"<br />
  <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
 
  <p>Much I marvelled the ungainly fowl to hear discourse so plainly,<br />
  Though its answer little meaning-little relevancy bore;<br />
 
  For we cannot help agreeing that no living human being<br />
  Ever yet was blessed with seeing bird above his chamber door-<br />
  Bird or beast upon the culptured bust above his chamber door,<br />
  <span class="lastLine">With such name as "Nevermore."</span></p>
 
  <p>But the Raven, sitting lonely on the placid bust, spoke only<br />
  That one word, as if his soul in that one word he did outpour.<br />
 
  Nothing farther then he uttered-not a feather then he fluttered-<br />
  Till I scarcely more than muttered, "Other friends have flown before-<br />
  On the morrow he will leave me, as my Hopes have flown before."<br />
  <span class="lastLine">Then the bird said, "Nevermore."</span></p>
 
  <p>Startled at the stillness broken by reply so aptly spoken,<br />
  "Doubtless," said I, "what it utters is its only stock and store<br />
 
  Caught from some unhappy master whom unmerciful Disaster<br />
  Followed fast and followed faster till his songs one burden bore-<br />
  Till the dirges of his Hope that melancholy burden more<br />
  <span class="lastLine">Of 'Never-nevermore.'"</span></p>
 
  <p>But the Raven still beguiling my sad fancy into smiling,<br />
  Straight I wheeled a cushioned seat in front of bird and bust and door;<br />
 
  Then, upon the velvet sinking, I betook myself to linking<br />
  Fancy unto fancy, thinking what this ominous bird of yore-<br />
  What this grim, ungainly, ghastly, gaunt, and ominous bird of yore<br />
  <span class="lastLine">Meant in croaking "Nevermore."</span></p>
 
  <p>This I sat engaged in guessing, but no syllable expressing<br />
  To the fowl whose fiery eyes now burned into my bosom's core;<br />
 
  This and more I sat divining, with my head at ease reclining<br />
  On the cushion's velvet lining that the lamp-light gloating o'er,<br />
  But whose velvet-violet lining with the lamp-light gloating o'er,<br />
  <span class="lastLine">She shall press, ah, nevermore!</span></p>
 
  <p>Then, methought, the air grew denser, perfumed from an unseen censer<br />
  Swung by seraphim whose foot-falls tinkled on the tufted floor.<br />
 
  "Wretch," I cried, "thy God hath lent thee-by these angels he hath sent thee<br />
  Respite-respite and nepenthe from thy memories of Lenore;<br />
  Quaff, oh, quaff this kind nepenthe and forget this lost Lenore!"<br />
  <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
 
  <p>"Prophet!" said I, "thing of evil!-prophet still, if bird or devil!-<br />
  By that Heaven that bends above us-by that God we both adore-<br />
 
  Tell this soul with sorrow laden if, within the distant<br />
  Aidenn, It shall clasp a sainted maiden whom the angels name Lenore-<br />
  Clasp a rare and radiant maiden whom the angels name Lenore."<br />
  <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
 
  <p>"Be that word our sign of parting, bird or fiend!" I shrieked, upstarting-<br />
  "Get thee back into the tempest and the Night's Plutonian shore!<br />
 
  Leave no black plume as a token of that lie thy soul hath spoken!<br />
  Leave my loneliness unbroken!-quit the bust above my door!<br />
  Take thy beak from out my heart, and take thy form from off my door!"<br />
  <span class="lastLine">Quoth the Raven, "Nevermore."</span></p>
 
  <p>And the Raven, never flitting, still is sitting, still is sitting<br />
  On the pallid bust of Pallas just above my chamber door;<br />
 
  And his eyes have all the seeming of a demon's that is dreaming,<br />
  And the lamp-light o'er him streaming throws his shadow on the floor;<br />
  And my soul from out that shadow that lies floating on the floor<br />
  <span class="lastLine">Shall be lifted-nevermore!</span></p>
 
  <p><cite>Edgar Allan Poe</cite></p>
 
  </div>
</div>
 
<!-- Sample Window 2 -->
 
<div id="sample2" class="window" style="left:200px;top:100px;width:280px;">
  <div class="titleBar">
    <span class="titleBarText">The Conqueror Worm</span>
    <img class="titleBarButtons" alt="" src="graphics/buttons.gif" usemap="#sampleMap2" width="50" height="14" />
    <map id="sampleMap2" name="sampleMap2">
      <area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
 
      <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />
      <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />
    </map>
  </div>
  <div class="clientArea" style="height:175px;">
 
  <h3>The Conqueror Worm</h3>
 
  <p>Lo! 'tis a gala night<br />
 
  Within the lonesome latter years!<br />
  An angel throng, bewinged, bedight<br />
  In veils, and drowned in tears,<br />
  Sit in a theatre, to see<br />
  A play of hopes and fears,<br />
  While the orchestra breathes fitfully<br />
 
  The music of the spheres.</p>
 
  <p>Mimes, in the form of God on high,<br />
  Mutter and mumble low,<br />
  And hither and thither fly-<br />
  Mere puppets they, who come and go<br />
  At bidding of vast formless things<br />
 
  That shift the scenery to and fro,<br />
  Flapping from out their Condor wings<br />
  Invisible Woe!</p>
 
  <p>That motley drama- oh, be sure<br />
  It shall not be forgot!<br />
  With its Phantom chased for evermore,<br />
 
  By a crowd that seize it not,<br />
  Through a circle that ever returneth in<br />
  To the self-same spot,<br />
  And much of Madness, and more of Sin,<br />
  And Horror the soul of the plot.</p>
 
  <p>But see, amid the mimic rout<br />
 
  A crawling shape intrude!<br />
  A blood-red thing that writhes from out<br />
  The scenic solitude!<br />
  It writhes!- it writhes!- with mortal pangs<br />
  The mimes become its food,<br />
  And seraphs sob at vermin fangs<br />
 
  In human gore imbued.</p>
 
  <p>Out- out are the lights- out all!<br />
  And, over each quivering form,<br />
  The curtain, a funeral pall,<br />
  Comes down with the rush of a storm,<br />
  While the angels, all pallid and wan,<br />
 
  Uprising, unveiling, affirm<br />
  That the play is the tragedy, "Man,"<br />
  And its hero the Conqueror Worm.</p>
 
  <p><cite>Edgar Allan Poe</cite></p>
 
  </div>
</div>
 
<!-- Sample Window 3 -->
 
<div id="sample3" class="window" style="left:350px;top:50px;width:300px;background-color:#f0c090;border-color:#ffe0b0 #a07040 #805020 #e0b080;">
  <div class="titleBar" style="background-color:#c08060;color:#ffffcc;">
    <span class="titleBarText">Spirits of the Dead</span>
    <img class="titleBarButtons" alt="" src="graphics/altbuttons.gif" longdesc="graphics/altbuttonslow.gif" usemap="#sampleMap3" width="50" height="14" />
    <map id="sampleMap3" name="sampleMap3">
      <area shape="rect" coords="0,0,15,13"  href="" alt="" title="Minimize" onclick="this.parentWindow.minimize();return false;" />
      <area shape="rect" coords="16,0,31,13" href="" alt="" title="Restore"  onclick="this.parentWindow.restore();return false;" />
 
      <area shape="rect" coords="34,0,49,13" href="" alt="" title="Close"    onclick="this.parentWindow.close();return false;" />
    </map>
  </div>
  <div class="clientArea" style="height:150px;background-color:#ffffcc;color:#806040;border-color:#805020 #e0b080 #ffe0b0 #a07040;scrollbar-base-color:#f0c090;">
 
  <h3>Spirits of the Dead</h3>
 
  <p>Thy soul shall find itself alone<br />
  'Mid dark thoughts of the grey tomb-stone;<br />
 
  Not one, of all the crowd, to pry<br />
  Into thine hour of secrecy.</p>
 
  <p>Be silent in that solitude,<br />
  Which is not loneliness- for then<br />
  The spirits of the dead, who stood<br />
  In life before thee, are again<br />
 
  In death around thee, and their will<br />
  Shall overshadow thee; be still.</p>
 
  <p>The night, though clear, shall frown,<br />
  And the stars shall not look down<br />
  From their high thrones in the Heaven<br />
  With light like hope to mortals given,<br />
 
  But their red orbs, without beam,<br />
  To thy weariness shall seem<br />
  As a burning and a fever<br />
  Which would cling to thee for ever.</p>
 
  <p>Now are thoughts thou shalt not banish,<br />
  Now are visions ne'er to vanish;<br />
 
  From thy spirit shall they pass<br />
  No more, like dew-drop from the grass.</p>
 
  <p>The breeze, the breath of God, is still,<br />
  And the mist upon the hill<br />
  Shadowy, shadowy, yet unbroken,<br />
  Is a symbol and a token.<br />
 
  How it hangs upon the trees,<br />
  A mystery of mysteries!</p>
 
  <p><cite>Edgar Allan Poe</cite></p>
 
  </div>
</div>
 
</body>
</html>
以上是关于javascript拖放函数的主要内容，如果未能解决你的问题，请参考以下文章
Javascript：拖放图像标签
Javascript拖放：成功拖放后删除拖动的元素
javascript DIV上下拖放功能
深入理解javascript原生拖放
使用 svg 库和 javascript 优化拖放
拖放网站生成器javascript库。