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

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

Ответы

Ответ 1

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

Ответ 2

anjalis был прав,

position: absolute !important;

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

Ответ 3

Попробуйте обернуть 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. Очевидно, что ошибка связана с правильным вычислением ширины.

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Когда вы реализуете PLS-перетаскивание, рассмотрите то же самое...

Ответ 7

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