Incompatibilité jQuery Safari / Chrome avec la propriété de confinement draggable

Ce code fonctionne dans Firefox, Internet Explorer, pas dans 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>

Dans Safari/Chrome, le divNew ne peut être déplacé verticalement. jQuery cette fonctionnalité est actuellement incompatible? Je suis à l'aide 1.5.2 version stable.Il peut être trouvé ici jQuery 1.5.2

source d'informationauteur user37122

  1. 11

    la solution que j'ai trouvé est de mettre l'élément position: absolute !important:))

  2. 3

    anjalis a droite,

    position: absolute !important;

    a fonctionné parfaitement pour moi. J'avais eu des petits problèmes de l'élément déplaçable légèrement popping out du conteneur lorsque vous avez relâché et cliquez sur l'élément. il permettrait de compenser la légère. avec position: absolute !important et le parent de l'élément position: relative; il a travaillé comme un charme.

  3. 2

    Essayez d'emballer la divParent div avec une autre div,puis réglage de l'enceinte de confinement à la div emballage divParent tout en injectant dans divParent. Cela a fonctionné pour moi:

        <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>

    EDIT: je viens de réaliser que cela ne fonctionne pas complètement. Vous devez inclure une vérification pour voir si le navigateur est basé sur webkit, puis placer le récipient à 1000px au lieu de 500px. Le bug semble être, de toute évidence, liés au calcul de la largeur correctement.

  4. 2

    J'ai eu une sorte de problème similaire, où mon déplaçable éléments absolument positionnées, et est devenu relativement positionnées dans google Chrome et Safari.
    L'ajout de !important pour le style position:absolute fait le tour.

  5. 1

    Essayez de remplacer "parent" avec un objet dom... c'est à dire, $("#divParent") et voir si cela fonctionne.

  6. 1

    Jquery UI Déplaçable méthode ne fonctionnera pas dans Safari et MAC OS X environnement de toute façon. Alors, quand écrire le code de la considèrent même comme:

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

    Lorsque vous implémentez faire Glisser et Déposer des pls considèrent même...

  7. 0

    Pour résoudre ce problème, vous devez définir le paramètre WMODE diferent transparent. Je viens de mettre la wmode=fenêtre et cela fonctionne très bien dans tous les navigateurs.