jQuery Safari / Chrome несовместимость с перетаскиваемым свойством сдерживания - PullRequest
Новая
       16

jQuery Safari / Chrome несовместимость с перетаскиваемым свойством сдерживания

12 голосов
/ 13 ноября 2008

Этот код работает в 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

Ответы [ 7 ]

11 голосов
/ 12 марта 2011

Решение, которое я нашел, - установить элемент position: absolute !important,:))

3 голосов
/ 09 апреля 2012

Анджалис был прав, 

position: absolute !important;

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

2 голосов
/ 25 августа 2009

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

2 голосов
/ 24 января 2009

Попробуйте обернуть 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>

РЕДАКТИРОВАТЬ: я только что понял, что это не работает полностью. Вы должны включить проверку, чтобы убедиться, что браузер основан на webkit, а затем установить контейнер в 1000px вместо 500px. Ошибка, очевидно, связана с правильным вычислением ширины.

1 голос
/ 02 декабря 2010

Перетаскиваемый метод Jquery UI не будет работать в среде Safari и MAC OS X. Поэтому при написании кода учитывайте то же самое: 

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

Когда вы реализуете Drag and Drop, пожалуйста, учитывайте одно и то же ...

1 голос
/ 19 ноября 2008

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

0 голосов
/ 05 октября 2010

Чтобы решить эту проблему, вы должны определить WMODE, отличный от прозрачного. Я просто установил окно wmode =, и это прекрасно работает во всех браузерах.

...