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 131 132 133 134 135 136 137
| $(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var tmp;
$('.note').each(function(){
/* Finding the biggest z-index value of the notes */
tmp = $(this).css('z-index');
if(tmp>zIndex) zIndex = tmp;
})
/* A helper function for converting a set of elements to draggables: */
make_draggable($('.note'));
/* Configuring the fancybox plugin for the "Add a note" button: */
$("#addButton").fancybox({
'zoomSpeedIn' : 60,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'hideOnContentClick': false,
'padding' : 15
});
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body,.pr-author').live('keyup',function(e){
if(!this.preview)
this.preview=$('#fancy_ajax .note');
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
});
/* Changing the color of the preview note: */
$('.color').live('click',function(){
$('#fancy_ajax .note').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
});
/* The submit button: */
$('#note-submit').live('click',function(e){
if($('.pr-body').val().length<4)
{
alert("The note text is too short!")
return false;
}
if($('.pr-author').val().length<1)
{
alert("You haven't entered your name!")
return false;
}
$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
var data = {
'zindex' : ++zIndex,
'body' : $('.pr-body').val(),
'author' : $('.pr-author').val(),
'color' : $.trim($('#fancy_ajax .note').attr('class').replace('note',''))
};
/* Sending an AJAX POST request: */
$.post('ajax/post.php',data,function(msg){
if(parseInt(msg))
{
/* msg contains the ID of the note, assigned by MySQL's auto increment: */
var tmp = $('#fancy_ajax .note').clone();
tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
tmp.appendTo($('#main'));
make_draggable(tmp)
}
$("#addButton").fancybox.close();
});
e.preventDefault();
})
$('.note-form').live('submit',function(e){e.preventDefault();});
});
var zIndex = 0;
function make_draggable(elements)
{
/* Elements is a jquery object: */
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
$.get('ajax/update_position.php',{
x : ui.position.left,
y : ui.position.top,
z : zIndex,
id : parseInt(ui.helper.find('span.data').html())
});
}
});
}
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
this.bind("touchend", end);
};
$(".draggable").draggable(); |
Partager