jQuery Safari/Chrome incompatibilidad con la propiedad de contención que pueden arrastrarse

Este código funciona en Firefox, Internet Explorer, no en Safari/Chrome:jQuery Safari/Chrome incompatibilidad con la propiedad de contención que pueden arrastrarse

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

En Safari/Chrome, el divNew sólo puede moverse verticalmente. jQuery esta característica es actualmente incompatible? Estoy usando la versión estable 1.5.2.Se puede encontrar aquí jQuery 1.5.2

Fuente

2008-11-12 user37122

Intente reemplazar 'parent' con un objeto dom ... es decir, $ ("# divParent") y vea si eso funciona.

Fuente

2008-11-19 19:17:35

Creo wich usted tiene razón –

Pruebe envolviendo div div con otro div, y luego estableciendo contención al div envolviendo divParent mientras lo inyecta en divParent. Esto funcionó para mí:

<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: Me he dado cuenta de esto no funciona completamente. Debe incluir un cheque para ver si el navegador está basado en webkit, y luego configurar el contenedor a 1000 px en lugar de 500 px. El error parece estar, obviamente, relacionado con el cálculo del ancho correctamente.

Fuente

2009-01-23 21:23:15 jacobangel

parece que está más relacionado con el cálculo de la posición que el ancho – yoavf

Tuve algún tipo de problema similar, donde mis elementos de arrastre se colocaron absolutamente, y se colocaron relativamente en Chrome y Safari. Adding! Important para la posición de estilo: absolute hizo el truco.

Fuente

2009-08-25 14:45:35 user162806

Para resolver este problema, debe definir WMODE diferente a transparente. Acabo de configurar la ventana wmode = y esto funciona bien en todos los navegadores.

Fuente

2010-10-05 14:59:05 Marcus

Jquery UI El método arrastrable no funcionará en ningún modo en el entorno Safari y MAC OS X. Así que cuando el código de escritura consideran misma como:

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

Cuando se implementa arrastrar y soltar los pls consideran misma ...

Fuente

2010-12-02 05:51:50 Anes

la solución que he encontrado es para configurar el elemento position: absolute !important, :))

Fuente

2011-03-12 11:01:16 anjalis

con la última jQuery todavía la solución ... –

y establecer el elemento padre a position: relative; – Luke

La posición absoluta casi trabajada, estilo de página desordenados. Esto funcionó para mí http://stackoverflow.com/questions/2483943/jquery-ui-sortable-listitem-jumps-to-top-in-safari-and-chrome –

anjalis tenía razón,

position: absolute !important;

funcionó perfectamente para mí. Estaba teniendo un pequeño problema con el elemento arrastrable que salía ligeramente del contenedor cuando lo soltaba y hacía clic en el elemento. compensaría levemente. con position: absolute !important y el elemento padre position: relative; funcionó como un amuleto.

Fuente

2012-04-08 20:36:59 nathanlampe

jQuery Safari/Chrome incompatibilidad con la propiedad de contención que pueden arrastrarse

Respuesta

Cuestiones relacionadas