鼠标拖动层或者其他！

通过iframe里面的img也不能移动iframe吗？
请高手看看吧

解决方案 »

  1.   

    IFRAME是不能受控制的，但是若把它放到为DIV为父元素里，我们可以动它老子
      

  2.   

    楼上的和我想的也相同呀，页面-->div-->iframe-->image,那如何通过移动image来移动div呢？？
      

  3.   

    为何不通过移动DIV而来移IMG呢？
      

  4.   

    document.body.ondragenter = function()
    {
       window.event.returnValue = false;
    }
    document.body.ondragover =function()
    {
       window.event.returnValue = false;
    }var item_div = document.createElement("div");
    item_div.className = "itemDiv";
    //item_div.style.height = config.Item_div_height + "px";
    item_div.style.width = config.Item_div_width + "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 class='itemDivCaption'  cellSpacing='0' cellPadding='0' border='0'><tr><td height='16' width='16'><img ondragstart='currentMenuItem.dragDrop();' title='按住左键拖动窗口' style='cursor:move;' border=0 src='" + config.Skin_path + "/" + "move.gif'></td><td onmousedown='currentMenuItem.dragDrop();' align='center' style='cursor:default;'><strong>" + title + "</strong></td><td width='72px;' align='right'><button onclick='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='" + config.Skin_path + "/zoom_in.gif'></button><button onclick='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='" + config.Skin_path + "/zoom_out.gif'></button><button onclick='javascript:if(currentMenuItem!=null){currentMenuItem.innerHTML=\"\";removeGraphic(currentMenuItem);currentMenuItem=null;CollectGarbage();}'  title='点击关闭'><img align='middle' border=0 src='" + config.Skin_path + "/" + "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;
    } document.body.appendChild( item_div );
    //你先拿这个看看吧。
      

  5.   

    <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 ondragstart='currentMenuItem.dragDrop();' title='按住左键拖动窗口' style='cursor:move;' border=0 src='move.gif'></td><td width='200' bgcolor=blue onmousedown='currentMenuItem.dragDrop();' align='center' style='cursor:default;'><strong></strong></td><td width='72px;' align='right'><button onclick='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 onclick='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 onclick='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 onload="mveaablediv()">
    </body>
    </html>把这个另存了试试，因为是从以前写的一个大项目里摘的，所以少很多东西，效果不明显。本来点最前面的图片也可以拖动的。点中间的蓝色区域可以拖动。可以试着在那个 content 里放个存在的图片，再点图片，应该可以拖动
      

  6.   

    <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 ondragstart='currentMenuItem.dragDrop();' title='按住左键拖动窗口' style='cursor:move;' border=0 src='move.gif'></td><td width='200' bgcolor=blue onmousedown='currentMenuItem.dragDrop();' align='center' style='cursor:default;'><strong></strong></td><td width='72px;' align='right'><button onclick='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 onclick='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 onclick='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 onload="mveaablediv()">
    </body>
    </html>