JQuery draggable+resizable
Решил тут покусать немного jquery и столкнулся с проблемой
Есть див, исполняющий роль стикера(липкая бумажка)
Он должен ресайзиться и тягаться мышкой. Див позиционирован абсолютно.
Проблема в том, что при первой отрисовке страницы он сдвигает остальной контент вниз на свою высоту. Стоит начать его ресайзить - все приходит в норму
как это выглядит
Похоже, проблема в том, что браузер не перерисовывает страницу из-за абсолютного позиционирования дива. Вопрос - как его убедить в этом?
сам див:
.basket-stiker
{
background:#fff;
color:#000;
width:300px;
height:350px;
z-index:99;
border:1px solid #474747;
top:10px;
left:10px;
cursor: move;
}
инициализация:
<script type="text/javascript">
$(document).ready(function(){
$('#sticker')
.draggable(
{
opacity : 0.5,
stop: function (event, ui) {
$.post(
'<? echo $HTTP_ROOT_PATH; ?>stick.php',
{
action: 'move',
top: ui.offset.top,
left: ui.offset.left
}
);
}
}
);
$('#sticker')
.resizable(
{
minWidth: 250,
minHeight: 100,
stop: function (event, ui) {
$.post(
'<? echo $HTTP_ROOT_PATH; ?>stick.php',
{
action: 'resize',
width: ui.size.width,
height: ui.size.height
}
);
}
}
)
;
});
</script>
UPD Решено, спасибо за внимание ;%-))))
Есть див, исполняющий роль стикера(липкая бумажка)
Он должен ресайзиться и тягаться мышкой. Див позиционирован абсолютно.
Проблема в том, что при первой отрисовке страницы он сдвигает остальной контент вниз на свою высоту. Стоит начать его ресайзить - все приходит в норму
как это выглядит
Похоже, проблема в том, что браузер не перерисовывает страницу из-за абсолютного позиционирования дива. Вопрос - как его убедить в этом?
сам див:
.basket-stiker
{
background:#fff;
color:#000;
width:300px;
height:350px;
z-index:99;
border:1px solid #474747;
top:10px;
left:10px;
cursor: move;
}
инициализация:
<script type="text/javascript">
$(document).ready(function(){
$('#sticker')
.draggable(
{
opacity : 0.5,
stop: function (event, ui) {
$.post(
'<? echo $HTTP_ROOT_PATH; ?>stick.php',
{
action: 'move',
top: ui.offset.top,
left: ui.offset.left
}
);
}
}
);
$('#sticker')
.resizable(
{
minWidth: 250,
minHeight: 100,
stop: function (event, ui) {
$.post(
'<? echo $HTTP_ROOT_PATH; ?>stick.php',
{
action: 'resize',
width: ui.size.width,
height: ui.size.height
}
);
}
}
)
;
});
</script>
UPD Решено, спасибо за внимание ;%-))))
