| varpa89 | 09.10.2011 14:47 |
Dockable интерфейс
Всем привет! Делаю проект в универе. Для начала хочу разобраться как сделать dockable Интерфейс (перетаскивание окон как, например, Вижуал Студио или Эклипс). Смысл в том, что есть несколько дивов и при перетаскивании на них объект должен пристыковываться к ним и менять размер. Одна из проблем: не могу дропнуть объект из большего в меньший. Ну и соответственно, чтобы при изменении размеров дивов, в которые можно дропать, менялся и размер дропнутого объекта.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<style>
html, body{height:100%; margin-top: 0px; margin-right: 0px; margin-left: 0px;}
.leftdiv {float: left; width: 30%; height: 100%; background: red;}
.rightdiv {float: left; width: 70%; height: 100%;background: blue;}
.bottomdiv {width: 100%; height: 30%; background: yellow;}
.drophover {opacity:0.8}
</style>
<script type="text/javascript">
$(init);
function init(){
$('.makeMeDraggable')
.draggable({
cursor: 'move',
containment: 'window',
snap: '.makeMeDroppable',
snapMode: 'inner'
});
$('.makeMeDroppable').droppable({
hoverClass: 'drophover',
drop: dropEvent
});
};
function dropEvent(event, ui){
var new_width = $( this ).width();
var new_height = $( this ).height();
ui.draggable
.css('width', new_width)
.css('height', new_height)
.position( { of: $(this), my: 'left top', at: 'left top' } );
};
</script>
</head>
<body>
<div style="width: 100%; height: 70%">
<div class="leftdiv makeMeDroppable">
Первая колонка
</div>
<div class="rightdiv makeMeDroppable">
Вторая колонка
<div class="makeMeDraggable" style="background: gray; width: 50px; height: 50px;">
<div>Header</div>
<div>Content</div>
</div>
</div>
</div>
<div class="bottomdiv makeMeDroppable">
Третья колонка
</div>
</body>
</html>