zoukankan      html  css  js  c++  java

  • jquery 跨iframe拖拽

     

    iframe.html 主iframe页

    left.html     左侧引用页

    right.html   右侧引用页

    引用页中没有js代码，所有js代码在iframe.html中。

    http://kjah.javaeye.com

    要点:

    1.拖动层在iframe中拖动时需要另行计算位置（iframe位置+鼠标位置=当前窗口相对位置）。

    2.本例中拖动层不在鼠标下而在+10px的位置，是为了使iframe能有效监听到鼠标事件，如在鼠标下事件不会传到iframe中，需要进行位置计算比较麻烦。

    3.right页面取消选取动作（onselectstart），防止拖动时事件监听仍在right页面中（在ff中只要在mousedown里preventDefault()即取消选取动作）

    iframe.html

    Html代码 复制代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <HTML>  
    3.  <HEAD>  
    4.   <TITLE> Iframe content drag and drop </TITLE>  
    5.   <SCRIPT LANGUAGE="JavaScript" src="jquery-1.3.2.js"></SCRIPT>  
    6.   <SCRIPT LANGUAGE="JavaScript">  
    7.   <!--//http://kjah.javaeye.com   
    8.     $(function(){   
    9.             $("body").append("<div style='position:absolute' id='fly'></div>");   
    10.             $("body").mousemove(function(e){   
    11.                 var f=$("#fly:visible");   
    12.                     if(f[0]){   
    13.                         f.css("left",e.pageX+10);   
    14.                         f.css("top",e.pageY+10);   
    15.                     }   
    16.                 $("#show").html(e.pageX+"|"+e.pageY);   
    17.             });   
    18.             $("body").mouseup(function(){$("#fly").hide();});   
    19.                
    20.             $("#f2")[0].onload=function(){   
    21.                 var f1=$("#f1");   
    22.                 var f2=$("#f2");   
    23.                 var f1_body=$(f1[0].contentWindow.document.body);   
    24.                 var f2_body=$(f2[0].contentWindow.document.body);   
    25.   
    26.                 f1_body.mousemove(function(e){   
    27.                     var f=$("#fly:visible");   
    28.                     f.css("left",e.pageX+f1.offset().left+10);   
    29.                     f.css("top",e.pageY+f1.offset().top+10);   
    30.                     $(this).find("#show").html(e.pageX+"|"+e.pageY);   
    31.                 }).mouseup(function(){$("#fly").hide();});   
    32.   
    33.                 f1_body.find(".drop_area").mouseup(function(e){   
    34.                     $(this).append($("#fly:visible").html());//跨iframe不能用clone的对象append,可能克隆的对象是在外层document下保存   
    35.                     $("#fly:visible div").empty();   
    36.                 }).hover(function(){   
    37.                     if($("#fly:visible")[0]){   
    38.                         $(this).css("background-color","#ddd");   
    39.                     }   
    40.                 },function(){   
    41.                     $(this).css("background-color","#ccc");   
    42.                 });   
    43.   
    44.                 $("#test").mouseup(function(e){   
    45.                     $(this).append($("#fly:visible div").clone());//非跨iframe   
    46.                     $("#fly:visible div").empty();   
    47.                 });   
    48.   
    49.                 f2_body.mousemove(function(e){   
    50.                     $(this).find("#show").html(e.pageX+"|"+e.pageY);   
    51.                     var f=$("#fly:visible");   
    52.                     if(f[0]){   
    53.                         f.css("left",e.pageX+f2.offset().left+10);   
    54.                         f.css("top",e.pageY+f2.offset().top+10);   
    55.                     }   
    56.                 }).mouseup(function(){$("#fly").hide();}).bind("selectstart",function(e){e.preventDefault();});   
    57.   
    58.                 f2_body.find(".div1").mousedown(function(e){   
    59.                     e.preventDefault();   
    60.                     $("#fly").empty().append($(this).clone()).css({left:(f2.offset().left+e.pageX+10)+"px",top:(f2.offset().top+e.pageY+10)+"px"}).show();   
    61.                 });                
    62.             };   
    63.     });   
    64.   
    65.   //-->  
    66.   </SCRIPT>  
    67.  </HEAD>  
    68.   
    69.  <BODY style="height:100%">  
    70.   <!--  http://kjah.javaeye.com -->  
    71.   <iframe src="left.html" style="50%;height:50%" id="f1" ></iframe>  
    72.   <iframe src="right.html" style="200px;height:200px;margin:50px" id="f2"></iframe>  
    73.   <span id="show"></span>  
    74.   <div style="300px;height:200px;border:1px solid red" id="test"></div>  
    75.  </BODY>  
    76. </HTML>  

    left.html

    Html代码 复制代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <HTML>  
    3.  <HEAD>  
    4.   <TITLE> New Document </TITLE>  
    5.  <style>  
    6. .drop_area{   
    7.     border:1px solid gray;background-color:#ccc;150px;height:150px;margin:5px;float:left;overflow:auto;   
    8. }   
    9. .drop_area div{   
    10.     float:left;margin:3px   
    11. }   
    12. </style></HEAD>  
    13.   
    14.  <BODY style="height:100%">  
    15. <div class="drop_area"></div>  
    16. <div class="drop_area"></div>  
    17. <span id="show"></span>  
    18.  </BODY>  
    19. </HTML>  

    right.html

    Html代码 复制代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <HTML>  
    3.  <HEAD>  
    4.   <TITLE> New Document </TITLE>  
    5.   <style>  
    6. .div1{   
    7.     margin:3px;   
    8. }   
    9. div{float:left}   
    10.   </style>  
    11.  </HEAD>  
    12.   
    13.  <BODY style="height:100%" >  
    14.     
    15. <div style="border:1px solid red;50px;height:50px" class="div1">aaa</div>  
    16. <div style="border:1px solid green;50px;height:50px" class="div1">bbb</div>  
    17. <div style="border:1px solid blue;50px;height:50px" class="div1">ccc</div>  
    18. <span id="show"></span>  
    19.  </BODY>  
    20. </HTML>  
  • 相关阅读:
    七月算法--12月机器学习在线班-第七次课笔记—最大熵
    七月算法--12月机器学习在线班-第八次课笔记—推荐系统
    七月算法--12月机器学习在线班-第九次课笔记—推荐系统
    七月算法--12月机器学习在线班-第十次课笔记—人工神经网络
    常用测试用例总结
    word 保存错误
    Mysql(免安装版)安装、配置与卸载
    谈谈日志
    idea maven 仓库配置
    如何建立你自己的开发知识体系---转载
  • 原文地址：https://www.cnblogs.com/luluping/p/1559034.html
Copyright © 2011-2022 走看看