• 内嵌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,其它未知。

    效果图:

    源码打包下载

  • 相关阅读:
    C++ list<list<int> >类型的对象遍历
    Apache与Nginx服务器对比
    服务器重写技术:rewrite
    冒泡排序(python版)
    有k个list列表, 各个list列表的元素是有序的,将这k个列表元素进行排序( 基于堆排序的K路归并排序)
    堆排序(C++版)
    [转载] 单链表的相关操作
    TCP三次握手连接与四次握手断开
    [转载] TCP与UDP对比
    进程与线程的联系与区别
  • 原文地址:https://www.cnblogs.com/gudieaofei/p/2012022.html
Copyright © 2020-2023  润新知