javascript中拖动层

最新推荐文章于 2022-10-10 14:30:03 发布

bxf0011

最新推荐文章于 2022-10-10 14:30:03 发布

阅读量888

点赞数

分类专栏： javascript 文章标签： javascript function border div button null

本文链接：https://blog.csdn.net/bxf0011/article/details/1588382

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>
<head>
<script   language="javascript">
function   Pos(x,y)
{
   this.x   =   x;
   this.y   =   y;
}

var   currentMenuItem;
var   currentMenuItemPos   =   new   Pos(   0,0   );

function   mveaablediv()
{

   document.body.ondragenter   = function()
   {
   window.event.returnValue   =   false;
   }
   document.body.ondragover   =function()
   {
   window.event.returnValue   =   false;
   }
    //
var   item_div   =   document.createElement("div");
    item_div.style.position   =   "absolute"
    //item_div.style.height   =   config.Item_div_height   +   "px";
    item_div.style.width   =   100   +   "px";
    item_div.style.left =   currentMenuItemPos.x   +document.body.scrollLeft   +"px";
    item_div.style.top =   currentMenuItemPos.y   +   document.body.scrollTop   +"px";

    item_div.innerHTML   =   "<TABLE   style='position:absolute;'   class='itemDivCaption'     cellSpacing='0'   cellPadding='0'   border='1'><tr><td   height='16'   width='16'><img   οndragstart='currentMenuItem.dragDrop();'   title='按住左键拖动窗口'   style='cursor:move;'   border=0   src='move.gif'></td><td   width='200'   bgcolor=blue   οnmοusedοwn='currentMenuItem.dragDrop();'   align='center'   style='cursor:default;'><strong></strong></td><td   width='72px;'   align='right'><button   οnclick='javascript:currentMenuItem.content.style.zoom   =   parseFloat(currentMenuItem.content.style.zoom)   *   1.2;currentMenuItem.style.width=parseFloat(currentMenuItem.style.width)*1.2'   title='放大'><img   align='middle'   border=0   src='zoom_in.gif'></button><button   οnclick='javascript:currentMenuItem.content.style.zoom   =   parseFloat(currentMenuItem.content.style.zoom)   /   1.2;currentMenuItem.style.width=parseFloat(currentMenuItem.style.width)/1.2'   title='缩小'><img   align='middle'     border=0   src='/zoom_out.gif'></button><button   οnclick='javascript:if(currentMenuItem!=null){currentMenuItem.innerHTML=/"/";removeGraphic(currentMenuItem);currentMenuItem=null;CollectGarbage();}'     title='点击关闭'><img   align='middle'   border=0   src='close.gif'   ></button></td></tr></table>";

    var   content   =   document.createElement("div");
    content.style.zoom   =   1;
    item_div.appendChild(content);
    item_div.content   =   content;

    item_div.ondragstart   =   function()
{
  currentMenuItemPos   =   new   Pos(   event.offsetX,event.offsetY   );
}

item_div.ondrag   =   function()
   {
  if(currentMenuItem!=null)
  {
     this.style.left =   parseInt(this.style.left)   +   event.offsetX-   currentMenuItemPos.x;
     this.style.top =   parseInt(this.style.top)     +   event.offsetY   -   currentMenuItemPos.y;
    }
}
    item_div.ondragend   =   function()
    {
   currentMenuItemPos.x   =   parseInt(this.style.left)   -   parseInt(document.body.scrollLeft);
   currentMenuItemPos.y   =   parseInt(this.style.top)   -   parseInt(document.body.scrollTop);
   if(currentMenuItemPos.x   <   0   )   //防止将窗口拖出去之后拖不回来
   {
  currentMenuItemPos.x   =   0;
   }

   if(currentMenuItemPos.y   <   0   )   //防止将窗口拖出去之后拖不回来
   {
   currentMenuItemPos.y   =   0;
   }

  window.event.returnValue   =   false;
}

currentMenuItem   =   item_div;

document.body.appendChild(   item_div   );
}

</script>
</head>
<body   οnlοad="mveaablediv()">
</body>
</html>

bxf0011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中拖动层

function Pos(x,y) { this.x = x; this.y = y; } var currentMenuItem; var currentMenuItemPos = new Pos( 0,0 ); function mveaab
复制链接

扫一扫