1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
/*
* The very first increment of Droppables&Draggables demo. The code is going to
* be more concise (remove unnecessary code repetitions etc.). And imho the
* photo management is a good candidate for demonstration of more jQuery UI
* components (sortables, selectables...). More to come...
*
*/
$(window).bind('load', function() {
// make images in the gallery draggable
$('ul.gallery img').addClass('img_content').draggable({
helper: 'clone'
});
// make the trash box droppable, accepting images from the content section only
$('#trash div').droppable({
accept: '.img_content',
activeClass: 'active',
drop: function(ev, ui) {
var $that = $(this);
ui.draggable.parent().fadeOut('slow', function() {
ui.draggable
.hide()
.appendTo($that)
.fadeIn('slow')
.animate({
width: '72px',
height: '54px'
})
.removeClass('img_content')
.addClass('img_trash');
$(this).remove();
});
}
});
// make the shredder box droppable, accepting images from both content and trash sections
$('#shred div').droppable({
accept: '.img_content, .img_trash',
activeClass: 'active',
drop: function(ev, ui) {
var $that = $(this);
// images from the content
if (ui.draggable.hasClass('img_content')) {
ui.draggable.parent().fadeOut('slow', function() {
ui.draggable
.appendTo($that)
.animate({
width: '0',
height: '0'
}, 'slow', function(){
$(this).remove();
});
$(this).remove();
});
}
// images from the trash
else if (ui.draggable.hasClass('img_trash')) {
ui.draggable
.appendTo($that)
.animate({
width: '0',
height: '0'
}, 'slow', function(){
$(this).remove();
});
}
}
});
// make the gallery droppable as well, accepting images from the trash only
$('ul.gallery').droppable({
accept: '.img_trash',
activeClass: 'active',
drop: function(ev, ui) {
var $that = $(this);
ui.draggable.fadeOut('slow', function() {
var $item = createGalleryItem(this).appendTo($that);
$(this)
.removeClass('img_trash')
.addClass('img_content')
.css({ width: '144px', height: '108px' })
.show();
$item.fadeIn('slow');
});
}
});
// handle the trash icon behavior
$('a.tb_trash').livequery('click', function() {
var $this = $(this);
var $img = $this.parent().siblings('img');
var $item = $this.parents('li');
$item.fadeOut('slow', function() {
$img
.hide()
.appendTo('#trash div')
.fadeIn('slow')
.animate({
width: '72px',
height: '54px'
})
.removeClass('img_content')
.addClass('img_trash');
$(this).remove();
});
return false;
});
// handle the magnify button
$('a.tb_supersize').livequery('click', function() {
$('<img width="576" height="432">')
.attr('src', $(this).attr('href'))
.appendTo('#body_wrap')
.displayBox();
return false;
});
});
function createGalleryItem(img) {
var title = img.getAttribute('alt');
var href = img.getAttribute('src').replace(/thumbs\//, '');
var $item = $('<li><p>'+title+'</p><div><a href="#" title="Trash me" class="tb_trash">Trash me</a><a href="'+href+'" title="See me supersized" class="tb_supersize">See me supersized</a></div></li>').hide();
$item.prepend($(img));
return $item;
}
|
