zClip使用时ZeroClipboard生成的位置不对的问题

zclip官网:http://steamdev.com/zclip

我之前在另外一篇博文里面写了一个解决生成的位置不对的问题，请参考:http://www.cnblogs.com/longshiyVip/p/4663870.html,但是最近按照之前的方式发现不管用,于是又开始需求解决方案，就是下面的这个方案。

zClip是个很好的兼容浏览器的复制到剪贴板的解决方案。zClip在简单干净的页面时工作正常，但放到工作平台的框架里面去以后就不工作了。ZeroClipboard取到的offsetTop和offsetLeft不对。通过firebug调试半天才知道原因。

在执行初期绑定代码后:

<script type="text/javascript">
    $(document).ready(function () {
      $("a#copy-dynamic").zclip({
        path: 'js/ZeroClipboard.swf',
        copy: function () { return $('input#dynamic').val(); },
        afterCopy: function () { alert("ok"); }
      });
    });
  </script>

这段代码会自动在id="copy-dynamic”的控件后生成以下代码:

<div class="zclip" id="zclip-ZeroClipboardMovie_1" 
style="position: absolute; left: 10px; top: 33px; width: 258px; height: 14px; z-index: 99;">
<embed id="ZeroClipboardMovie_1" src="js/ZeroClipboard.swf" loop="false" menu="false" 
quality="best" bgcolor="#ffffff" width="258" height="14" name="ZeroClipboardMovie_1" 
align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=258&amp;height=14" 
wmode="transparent"></div>

其本意是会在id="copy-dynamic”的控件上面覆盖“ZeroClipboard.swf”，检查发现这个位置不对，没有覆盖上去。

修改jquery.zclip.js中的getDOMObjectPosition函数,如下所示:

getDOMObjectPosition: function (obj, stopObj) {
        // get absolute coordinates for dom element
        var info = {
            left: 0,
            top: 0,
            width: obj.width ? obj.width : obj.offsetWidth,
            height: obj.height ? obj.height : obj.offsetHeight
        };
 
        if (obj && (obj != stopObj)) {
          //info.left += obj.offsetLeft; //修改前
          //info.top += obj.offsetTop; //修改前
          jpos = $(obj).position(); //修改后
          info.left += jpos.left; //修改后
          info.top += jpos.top; //修改后
        }
 
        return info;
    }

这里使用了jQuery的position函数。

重新刷新界面，发现这次生成的位置终于对了，成功覆盖到id="copy-dynamic”的控件上面，成功！