jQuery Safari/Chrome 与可拖动的包含属性不兼容答案

【问题标题】：jQuery Safari/Chrome incompatibility with draggable containment propertyjQuery Safari/Chrome 与可拖动的包含属性不兼容
【发布时间】：2010-09-22 01:54:28
【问题描述】：

此代码适用于 Firefox、Internet Explorer，不适用于 Safari/Chrome：

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script>
        function newDiv() {
            var div = $('<div id="divNew" style="width: 50px; height: 50px; border: solid 1px; background: Red"></div>');
            $('#divParent').append(div);
            div.draggable(
            {
                containment: 'parent'
            });
        }
    </script>
</head>
<body>
    <a href="javascript:;" onclick="newDiv()">new div</a>
    <div id="divParent" style="width: 500px; height: 500px; border: solid 1px;"></div>
</body>

在 Safari/Chrome 中，divNew 只能垂直移动。 jQuery的这个功能目前不兼容？我使用的是 1.5.2 稳定版。可以在这里找到jQuery 1.5.2

【问题讨论】：

标签： jquery jquery-ui safari google-chrome draggable

【解决方案1】：

我找到的解决方案是设置元素position: absolute !important, :))

【讨论】：

并将父元素设置为position: relative;
绝对位置几乎可以工作，页面样式混乱。这确实对我有用stackoverflow.com/questions/2483943/…

【解决方案2】：

anjalis 是对的，

position: absolute !important;

非常适合我。当您释放并单击元素时，我遇到了一个可拖动元素从容器中略微弹出的小问题。它会轻微抵消。使用position: absolute !important 和父元素position: relative;，它就像一个魅力。

【讨论】：

【解决方案3】：

尝试用另一个 div 包装 divParent div，然后在将 div 包装 divParent 注入 divParent 时将其设置为包含。这对我有用：

    <script>
        function newDiv() {
            var divs = 
              $(unescape('%3Cdiv class="divNew" style=""%3E&nbsp;%3C/div%3E'));
            divs.draggable(
            {
             containment: $('#a')
            });
            $('#divParent').append(divs);
       }
   </script>
</head>
<body>
    <style>
    .divNew {width: 50px; height: 50px;border: solid 1px; background: Red;}
    #divParent {width: 500px; height: 500px; border: solid 1px;};
    </style>
    <a href="javascript:;" onclick="newDiv()">new div</a>
    <div id="a">
      <div id="divParent" style=""> <!--<div class="divNew"></div>-->
      </div>       
    </div>
</body>

编辑：我刚刚意识到这并不完全有效。您应该检查浏览器是否基于 webkit，然后将容器设置为 1000 像素而不是 500 像素。显然，该错误似乎与正确计算宽度有关。

【讨论】：

似乎与计算位置比计算宽度更相关

【解决方案4】：

我有一些类似的问题，我的可拖动元素是绝对定位的，而在 Chrome 和 Safari 中变得相对定位。将 !important 添加到样式位置：absolute 就成功了。

【讨论】：

【解决方案5】：

尝试用 dom 对象替换 'parent'... 即 $("#divParent") 并查看是否可行。

【讨论】：

【解决方案6】：

Jquery UI Draggable 方法将无法在 Safari 和 MAC OS X 环境中以任何方式工作。所以在写代码的时候考虑一下：

if(!($browser.safari && navigator.appVersion.indexOf('Mac')!= -1)) {
    $('div.urid').draggable({
        helper: 'clone',
        opacity: 0.4
    });
}

当您实现拖放时，请考虑相同...

【讨论】：

【解决方案7】：

要解决此问题，您必须定义不同于透明的 WMODE。我只是设置了 wmode=window，这在所有浏览器中都可以正常工作。

【讨论】：