Question

此代码适用于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

Answer 1

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

Answer 2

anjalis是对的，

position: absolute !important;

对我来说很完美。当你释放并点击元素时，我有一个小问题，可拖动的元素从容器中略微弹出。它会抵消轻微的影响。使用position: absolute !important和父元素position: relative;，它就像一个魅力。

Answer 3

尝试用另一个div包装divParent div，然后在将divparent注入divParent时将包含设置为div包装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，然后将容器设置为1000px而不是500px。显然，这个错误与正确计算宽度有关。

Answer 4

我有一些类似的问题，我的可拖动元素绝对定位，并在Chrome和Safari中相对定位。添加！重要的风格位置：绝对成功。

Answer 5

尝试用dom对象替换'parent'，即$（“＃divParent”），看看是否有效。

Answer 6

Jquery UI Draggable方法无法在Safari和MAC OS X环境中以任何方式工作。因此，当编写代码时，请考虑：

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

实施拖放时，请考虑相同...

Answer 7

要解决此问题，您必须将MODE定义为透明。我只是设置了wmode = window，这在所有浏览器中都能正常工作。

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

7 个答案: