• 内嵌iframe的jquery拖动层


    调用方法:

    <script type="text/javascript">
    $(
    function() {
    parent.setDrag($(
    "#PopupTitle"), 'popupDiv');
    });
    </script>

    其中,PopupTitle是触发拖拉事件的标签ID,popupDiv是iframe的父标签ID,拖拉事件的代码如下:

    function setDrag(obj, pid) {
    var parent = $("#" + pid);
    var div = $("#movePopup");

    obj.mousedown(
    function(e) {
    if (e.target.nodeName.toLowerCase() == 'img') return;
    div.css({
    height: parent.height(),
    parent.width(),
    top: parent.css(
    "top"),
    left: parent.css(
    "left"),
    opacity:
    0.2
    });
    parent.hide();
    if (isIE) {
    $$(
    "movePopup").setCapture();
    }

    var offset = obj.offset();
    var x = e.clientX;
    var y = e.clientY;

    $(document).bind(
    "mousemove", function(event) {
    var currentX = event.clientX - x;
    var currentY = event.clientY - y;
    if (currentX < 0) currentX = 0;
    if (currentY < 0) currentY = 0;
    if (currentX + div.width() > document.documentElement.clientWidth)
    currentX
    = document.documentElement.clientWidth - div.width();
    if (currentY + div.height() > document.documentElement.clientHeight)
    currentY
    = document.documentElement.clientHeight - div.height();

    div.css({
    left: currentX,
    top: currentY
    });
    });

    $(document).mouseup(
    function() {
    $(document).unbind(
    "mousemove");
    if (isIE) {
    $$(
    "movePopup").releaseCapture();
    }
    parent.css({
    top: div.css(
    "top"),
    left: div.css(
    "left")
    });
    div.css({
    0,
    height:
    0
    });
    parent.show();
    });

    return false;
    });
    }

    原理:触发拖动事件,程序将隐藏iframe层并显示一个同样位置和大小的空层进入拖拽,当鼠标左键松开时,隐藏空层,将其坐标设置到iframe层并显示。不直接拖拉iframe层的原因是为了避免所引用页面代码过多导致拖拉时出现闪烁的情况。

    浏览器兼容:IE6/7/8/9、firefox、chrome,其它未知。

    效果图:

    源码打包下载

  • 相关阅读:
    win10安装tomcat7
    分布式任务调度平台XXL-Job搭建
    定时任务
    分散读取与聚集写入
    通道(Channel)的原理获取
    直接缓冲区和非缓冲区
    摘:"error LNK2019: 无法解析的外部符号 该符号在函数 中被引用" 错误原因
    摘:static,const,inline,define的意义
    摘:LIB和DLL的区别与在VC中的使用
    VS2010 DLL库生成和使用
  • 原文地址:https://www.cnblogs.com/gudieaofei/p/2012022.html
Copyright © 2020-2023  润新知