Помогите пожалуйста реализовать следующую задумку, я уже весь день кручу и так как знаний нет в js ничего не получается =(
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.body {display:inline-block;float:left;margin-right:50px;}
.thumb { display:block; width: 300px;margin:1px; border: 1px solid #aaa; background: #DDD;}
.album { display:inline-block;width: 300px; height: 300px; padding: 4px; border: 1px solid #DDD; background: #efefef; }
.album-name {display:block;width:100%;text-align:left;border:1px solid #aaa; background: #DDD;}
</style>
<script>
$(function() {
$( ".thumb" ).draggable();
$( ".sidebar" ).droppable();
});
</script>
</head>
<body>
<div class="body">
<div rel="1" class="thumb">
Первый блок
</div>
<div rel="2" class="thumb">
Второй блок
</div>
<div rel="3" class="thumb">
Третий блок
</div>
<div rel="4" class="thumb">
Четвертый блок
</div>
<div rel="5" class="thumb">
Пятый блок
</div>
</div>
<div class="album">
<button id="1" class="album-name button">Папка 1<span class="after"></span></button>
<button id="2" class="album-name button">Папка 2<span class="after"></span></button>
<button id="3" class="album-name button">Папка 3<span class="after"></span></button>
</div>
</body>
</html>
Хочу сделать чтобы можно было блок
<div class="thumb" rel="2">текст</div>
скопировать в блок
<div class="album">
К примеру если при перемещении навести его на Папка 2
Блок сохранялся после
<button id="2" class="album-name button">Папка 2<span class="after"></span></button>