jQuery Safari/Chrome Inkompatibilität mit ziehbar Eindämmung Eigenschaft

Dieser Code funktioniert in Firefox, Internet Explorer, nicht in Safari/Chrome:jQuery Safari/Chrome Inkompatibilität mit ziehbar Eindämmung Eigenschaft

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

In Safari/Chrome kann die divNew nur vertikal bewegt werden. jQuery ist diese Funktion derzeit nicht kompatibel? Ich benutze 1.5.2 stabile version.It kann hier jQuery 1.5.2

Quelle

2008-11-12 user37122

Versuchen Sie, ersetzen "Eltern" mit einem dom-Objekt ... dh, $ ("# divParent") und sehen, ob das funktioniert.

Quelle

2008-11-19 19:17:35

Ich denke, dass Sie richtig sind –

Versuchen Sie, das divParent-div mit einem anderen div zu umbrechen und dann containment auf das div wrapping divParent zu setzen, während Sie es in divParent injizieren. Dieser arbeitete für mich:

<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: Ich habe erkannt, das nicht vollständig funktioniert. Sie sollten überprüfen, ob der Browser webkitbasiert ist, und dann den Container auf 1000px anstelle von 500px setzen. Der Fehler scheint offensichtlich mit der richtigen Berechnung der Breite zu tun zu haben.

Quelle

2009-01-23 21:23:15 jacobangel

Scheint, es ist mehr auf die Berechnung der Position als die Breite – yoavf

Ich hatte ein ähnliches Problem, bei dem meine ziehbaren Elemente absolut positioniert waren, und wurden relativ in Chrome und Safari positioniert. Hinzufügen! Wichtig für die Stilposition: Absolut hat den Trick gemacht.

Quelle

2009-08-25 14:45:35 user162806

Um dieses Problem zu beheben, müssen Sie WMODE anders als transparent definieren. Ich setze einfach das wmode = window und das funktioniert in allen Browsern.

Quelle

2010-10-05 14:59:05 Marcus

Jquery UI Die Draggable-Methode funktioniert nicht in Safari- und MAC OS X-Umgebungen. Also, wenn der Schreibcode prüfen gleiche wie:

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

Wenn Sie Drag & Drop implementieren pls gleichen betrachten ...

Quelle

2010-12-02 05:51:50 Anes

die Lösung i fand das Element position: absolute !important zu setzen, :))

Quelle

2011-03-12 11:01:16 anjalis

mit neuesten jquery es immer noch die Lösung ... –

Und legte das übergeordnete Element auf Position: relativ; – Luke

Die Position absolut fast funktioniert, verwirrte Seitenstil. Das hat für mich funktioniert http://stackoverflow.com/questions/2483943/jquery-ui-sortable-listitem-jumps-to-top-in-safari-and-chrome –

anjalis war richtig,

position: absolute !important;

funktionierte perfekt für mich. Ich hatte ein kleines Problem mit dem ziehbaren Element, das leicht aus dem Container herausspringt, als du es losgelassen hast und auf das Element geklickt hast. es würde leicht ausgleichen. mit position: absolute !important und dem Elternelement position: relative; funktionierte es wie ein Charme.

Quelle

2012-04-08 20:36:59 nathanlampe

jQuery Safari/Chrome Inkompatibilität mit ziehbar Eindämmung Eigenschaft

Antwort

Verwandte Themen