zoukankan      html  css  js  c++  java
  • 内嵌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,其它未知。

    效果图:

    源码打包下载

  • 相关阅读:
    『Python基础』第3节:变量和基础数据类型
    Python全栈之路(目录)
    前端
    Python十讲
    Ashampoo Driver Updater
    druid 连接池的配置
    webService 入门级
    pom
    pom----Maven内置属性及使用
    webservice 总结
  • 原文地址:https://www.cnblogs.com/gudieaofei/p/2012022.html
Copyright © 2011-2022 走看看