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
|
$(function() {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
$.ajax({
type:"POST",
url: "<?php $this->baseUrl('/index/index')?>",
// j'en sais rien comment faire
)
// let the gallery items be draggable
$('.slot',$gallery).draggable({
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#slot').length ? '#slotbase' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move',
});
// let the trash be droppable, accepting the gallery items
$arm.droppable({
accept: '#gallery .slot',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteImage(ui.draggable);
}
});
// let the trash be droppable, accepting the gallery items
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash .slot',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh"></a>';
function deleteImage($item) {
$item.fadeOut(function() {
var $list = $('.slotbaseCard',$arm).length ? $('.slotbaseCard',$arm) : $('<div class="slotabseCard">').appendTo($arm);
//$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '30px' }).find('img').animate({ height: '39px' });
});
});
}
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash"></a>';
function recycleImage($item) {
$item.fadeOut(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','30px').append(trash_icon).find('img').css('height','39px').end().appendTo($gallery).fadeIn();
});
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
}); |
