层拖动Drag Div

原创

DickyNet 2022-08-24 09:40:12 博主文章分类：JavaScript ©著作权

文章标签 div function generator border xhtml 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者DickyNet的原创作品，请联系作者获取转载授权，否则将追究法律责任

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <script type="text/javascript">
  <!--
  function $(id)
  {
    return document.getElementById(id);  
  }
  var g_CatchDiv = false;
  var g_obj;
  var g_objName;
  function CatchMoveDiv(obj, name)
  {
    window.setTimeout('g_CatchDiv = true', 200);
    g_obj = obj;
    g_objName = name;
    var oMove = $('divMove');
    var MoveObj = obj;
    oMove.innerHTML = MoveObj.outerHTML;
    oMove.style.cursor = '';
    oMove.style.filter = 'alpha(opacity=50)';
  //    document.body.style.filter = 'alpha(opacity = 30)';
  //    oMove.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
    oMove.style.left = event.x - 35;
    oMove.style.top = event.y + 10;
    oMove.setCapture();
    document.onmouseup = function() {ReleaseDiv();};
    document.onmousemove = function() {MoveDiv();};
  }

  function ReleaseDiv()
  {
    window.setTimeout('g_CatchDiv = false', 200)
    var oMove = $('divMove');
    oMove.style.display = 'none';
    oMove.releaseCapture();
    document.onmousemove = null;
  }

  function MoveDiv()
  {
    if (g_CatchDiv)
    {
      var oMove = $('divMove');
      oMove.style.left = event.x - 35;
      oMove.style.top = event.y;
      oMove.style.display = '';
    }
  }
  //-->
  </script>
  <div id="divA" style="cursor:pointer; border:solid 1px" οnmοusedοwn="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" οnmοusemοve="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.innerText + '〗下吗？')) {}}">AAA</div>
  <div> </div>
  <div id="divB" style="cursor:pointer; border:solid 1px" οnmοusedοwn="if (!g_CatchDiv) {CatchMoveDiv(this, this.innerText);}" οnmοusemοve="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.innerText + '〗下吗？')) {}}">BBB</div>
  <div id="divMove" style="position:absolute;display:none; z-index:0;"></div>
  <input id="btnSubmit" type="submit" οnmοusedοwn="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" οnmοusemοve="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.value + '〗下吗？')) {}}" value="Submit" />
  <input type="reset" οnmοusedοwn="if (!g_CatchDiv) {CatchMoveDiv(this, this.value);}" οnmοusemοve="if (g_CatchDiv && g_obj != this) {if (confirm('你确定将〖' + g_objName + '〗移动到〖' + this.value + '〗下吗？')) {}}" value="Reset" />
 </body>
</html>