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

アンジャリスは正しかった

position: absolute !important;

私にとって完璧に機能しました。要素を離してクリックすると、ドラッグ可能な要素がコンテナからわずかに飛び出すという小さな問題がありました。わずかにオフセットします。とそれが魅力のように機能position: absolute !importantした親要素。position: relative;

于 2012-04-08T20:36:59.673 に答える
2

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ベースであるかどうかを確認するためのチェックを含めてから、コンテナを500pxではなく1000pxに設定する必要があります。このバグは、明らかに、幅の適切な計算に関連しているようです。

于 2009-01-23T21:23:15.597 に答える
2

ドラッグ可能な要素が絶対に配置され、Chrome と Safari では相対的に配置されるという、ある種の同様の問題がありました。スタイル position:absolute に !important を追加するとうまくいきました。

于 2009-08-25T14:45:35.517 に答える
1

'parent'をdomオブジェクトに置き換えてみてください...つまり、$（ "＃divParent"）して、それが機能するかどうかを確認してください。

于 2008-11-19T19:17:35.273 に答える
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 に答える
0

この問題を解決するには、透過と異なる WMODE を定義する必要があります。wmode=window を設定しただけで、これはすべてのブラウザーで正常に機能します。

于 2010-10-05T14:59:05.220 に答える