jquery UI с возможностью перетаскивания с возможностью изменения размера не работает в ie9?

Код работает в Chrome, и я пытаюсь заставить код работать на ie9. Он правильно работает с draggable() без включения, но сильно портит поведение, когда для включения установлено значение parent:

img = $("<img alt='Preview' id='preimg' src='" + data.result.url +"' />")
$('#preimage').append(img);
$('#preimage').resizable({
                    'aspectRatio':true,
                    'handles':"all",
                    'autoHide':true,
                     containment: "parent"
                }).draggable({
                            containment: "parent"
                        });

Родительская позиция устанавливается относительной. Я использую jquery 1.7.2 и jquery-ui 1.8.20. Есть ли обходной путь?

ИЗМЕНИТЬ

После долгих испытаний я обнаружил, что расчет размера контейнера для div работает неправильно, мне удалось заставить его работать с включенным изменением размера, но без фактического изменения размера div. Как только я изменяю размер области перетаскивания, она уменьшается в размере, многократное изменение размера приводит к тому, что эта область становится меньше, пока параметр перетаскивания не перестанет работать.


internet-explorer jquery-ui jquery-ui-draggable jquery-ui-resizable
person Vishal    schedule 22.05.2012    source источник
comment
Не могли бы вы предоставить jsFiddle (jsfiddle.net), показывающий это?   -  person TJ VanToll    schedule 23.05.2012
comment
По-видимому, некоторые параметры недоступны в версии jquery ui 1.8.18, и по какой-то причине я не могу изменить размер для работы с jsfiddle, поэтому я не смог воспроизвести эффект там.   -  person Vishal    schedule 23.05.2012

Ответы (1)


arrow_upward
2
arrow_downward

Я обнаружил, что есть несколько отчетов об ошибках с библиотекой jquery ui по этим проблемам - http://bugs.jqueryui.com/report/10?P=resizable

Мне удалось найти обходной путь, который я тщательно тестировал и который должен работать в большинстве ситуаций. Ключевым моментом здесь является то, что вам нужно использовать контейнер div, который не является плавающим и имеет относительную позицию. Если вам нужно использовать плавающий/абсолютный div, просто создайте внутри него div и установите относительную позицию. Для кода в вопросе html выглядит так:

<div class="outer"> 
    <div class="container">
         <div id="preimage"></div>
    </div>
</div>

и css будет:

.outer{
position:absolute;
right:0;
}
.container{
position: relative; 
}

Поскольку вы не можете перетаскивать элемент при изменении размера и наоборот, более безопасным способом (чтобы избежать некоторых проблем) использования javascript будет:

$('#sqoutline2').resizable({
        'handles':"all",
        'autoHide':false,
        containment: "parent",
        start:function(){$('#sqoutline2').draggable('options','disabled','true');},
        stop:function(){$('#sqoutline2').draggable('options','disabled','false');}
    }).draggable({containment:"parent",
            start:function(){$('#sqoutline2').resizable('options','disabled','true');},
           stop:function(){$('#sqoutline2').resizable('options','disabled','false');}
       });
person Vishal    schedule 15.08.2012