12

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

4

7 回答 7

11

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

于 2011-03-12T11:01:16.447 回答
3

anjalis 是对的，

position: absolute !important;

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

于 2012-04-08T20:36:59.673 回答
2

尝试用另一个 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 像素。显然，该错误似乎与正确计算宽度有关。

于 2009-01-23T21:23:15.597 回答
2

I had some kind of similar problem, where my draggable elements were absolutely positionned, and became relatively positionned in Chrome and Safari. Adding !important to the style position:absolute made the trick.

于 2009-08-25T14:45:35.517 回答
1

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

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

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

于 2010-12-02T05:51:50.360 回答
1

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

于 2008-11-19T19:17:35.273 回答
0

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

于 2010-10-05T14:59:05.220 回答