| |
|
|
| | задача проста, да не проста.
Есть блок, ему задано overflow:auto; и это не изменить.
В нем лежит несколько картинок.
<div style="overflow:auto;">
<img src'...' />
<img src'...' />
<img src'...' />
<img src'...' />
</div>
|
Нужно реализовать вытаскивание картинок из этого блока. (хватаешь мышкой и потащил прочь из блока)
Я это реализовал с помощью jQuery и плагина для нее draggable
$('div IMG').draggable({
helper : 'clone'
});
|
все работает, но по скольку диву задан overflow:auto при вытаскивании картинки она либо скрывается либо появляется скрол.
У меня есть идея как это можно обойти.
Дело в том, что при клонировании draggable вставляет клон картинки сразу за картинкой за которую мы взялись.
Думаю клонировать ее в начало документа, но как это сделать не знаю.
Может у кого есть идеи. Или вообще может что другое подскажете. | |
| |
|
|
| |
|
|
| |
для: jangot
(21.01.2010 в 13:16)
| | | > Есть блок, ему задано overflow:auto; и это не изменить.
меняйте это свойство при начале перетаскивания, по завершению возвращайте | |
| |
|
|
| |
|
|
| |
для: AlexSol
(21.01.2010 в 13:29)
| | | Но в таком случае будет пропадать скрол и буду появляться скрытые элементы | |
| |
|
|
| |
|
|
| |
для: jangot
(21.01.2010 в 13:32)
| | | <!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#draggable').draggable({ helper: 'clone' });
});
</script>
</head>
<body style="font-size:62.5%;">
<div style=" margin:100px; padding:100px; overflow:auto; width:150px; height:150px; border:1px solid red;">
<div id="draggable">Drag me</div>
</div>
</body>
</html> | |
| |
|
|
| |
|
|
| |
для: AlexSol
(21.01.2010 в 13:36)
| | | Как не удивительно но это работает, не могу понять как :)
Оказалось что дело не в draggable, а в дополнительном плагине droppable
Если его отключить, то все работает так как в этом примере, а если подключить то появляется скролл. | |
| |
|
|
| |
|
|
| |
для: jangot
(21.01.2010 в 14:48)
| | | смотрите их настройки. исходный код плагинов врядли стоит менять | |
| |
|
|
| |
|
|
| |
для: AlexSol
(21.01.2010 в 15:19)
| | | Понятное дело менять не стоит :)
Сам не возьмусь.
Все разобрался. Сделал как в вашем примере.
Дело в том, что я задавал relative блоку со скролом и картинка за ним скрывалась, я это убрал и клон перестал скрываться.
Спасибо | |
| |
|
|
