2008-11-12 10 views
12

Этот код работает в Firefox, Internet Explorer, а не в Safari/Chrome:JQuery 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 стабильной версией. Здесь можно найти 0.

ответ

1

Попробуйте заменить родительский объект dom ... т.е. $ ("# divParent") и посмотреть, работает ли это.

+0

Я думаю, что вы правы – 2011-03-12 11:28:37

2

Попробуйте обернуть divParent div другим 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> 

EDIT: Я просто понял, что это не работает полностью. Вы должны включить проверку, чтобы убедиться, что браузер основан на вебките, а затем установите для этого контейнера 1000px вместо 500px. Очевидно, ошибка связана с вычислением ширины.

+0

Похоже, что он больше связан с вычислением позиции, чем ширина – yoavf 2009-01-27 14:29:22

2

У меня была какая-то аналогичная проблема, где мои перетаскиваемые элементы были абсолютно позиционированы и стали относительно позиционированы в Chrome и Safari. Добавление! Важно для позиции стиля: абсолютный сделал трюк.

0

Для решения этой проблемы необходимо определить степень прозрачности в формате WMODE. Я просто установил wmode = window, и это отлично работает во всех браузерах.

1

JQuery UI Draggable метод не будет работать в среде Safari и MAC OS X любым способом. Поэтому, когда писать код рассматривать как же:

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

При реализации перетаскивания Pls рассмотреть то же самое ...

11

решение я нашел, чтобы установить элемент position: absolute !important, :))

+0

с последним jquery, который по-прежнему является решением ... – 2012-12-02 02:17:09

3

anjalis был прав,

position: absolute !important; 

работал отлично для меня. У меня возникли небольшие проблемы с перемещаемым элементом, слегка выскользнувшим из контейнера, когда вы отпустили и нажмете на элемент. это будет незначительным. с position: absolute !important, а родительский элемент position: relative; работал как шарм.