Créer un post-it déplaçable

Bonjour,
je voudrais ajouter à mon site un div déplaçable dans lequel mettre des news. Je voudrais avoir trois fonctionnalités :

La possibilité pour l'utilisateur de fermer la news.
Le changement périodique du contenu.
La possibilité pour l'utilisateur, viq un cookie, de ne jamais voir la news.

Je cherche donc des infos sur ces sujets.

j'avais fait un script pour pouvoir déplacer un script librement sur la page, ca fait pas tout ce que tu cherches mais c'est deja un début.

la plupart des librairies javascript font des choses semblables et certaienement mieux faites (jquery, yui,...)

Code:

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
 
<script type="text/javascript">
	lastX = 0;
	lastY = 0;
 
	posX = 0;
	posY = 0;
 
	drag= 0;
 
	div_feuille 				= document.createElement('div');
 
	div_feuille.className 		= "feuille";
	div_feuille.id = "postIt";
 
	 //position initiale
	div_feuille.style.left		= "100px"; 
	div_feuille.style.top 		= "100px";
 
 
	div_feuille.style.zIndex	= "5";
	div_feuille.style.width		= "200px";
	div_feuille.style.height	= "200px";
	div_feuille.style.backgroundColor	= "yellow";
 
	div_feuille.onmousedown= function(){
		posX= Mouse.x - this.offsetLeft;
		posY= Mouse.y - this.offsetTop;
 
		drag = 1;
		return false;
	}
 
	div_feuille.onmousemove= function(){
		if(drag==1){
			if(lastX!=0){
				this.style.left= (this.offsetLeft- (lastX-Mouse.x) )+"px";
			}
			lastX = Mouse.x;
			if(lastY!=0){
				this.style.top= (this.offsetTop- (lastY-Mouse.y) )+"px";					
			}
			lastY = Mouse.y;
		}
		return false;
	}
 
	div_feuille.onmouseup=function(){
		drag= 0;
		lastX = 0;
		lastY = 0;
	}
 
	div_feuille.onmouseout=function(){
		drag= 0;
		lastX = 0;
		lastY = 0;
	}
 
	document.getElementsByTagName('body')[0].appendChild(div_feuille);
 
	// Variables de la gestion de l'evenement
	var Mouse = { "x": 0, "y": 0 };
 
	// Demande de gestion de l'evenement à NetScape
	if (navigator.appName.substring(0, 3) == "Net") {
		document.captureEvents(Event.MOUSEMOVE);
	}
 
	// Gestion de l'evenement
	var OnMouseMoveEventHandler = function() { }
	var OnMouseMove = function(e) {
		Mouse.x = (navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x + document.body.scrollLeft;
		Mouse.y = (navigator.appName.substring(0, 3) == "Net") ? e.pageY : event.y + document.body.scrollTop;
		if (Mouse.x < 0) { Mouse.x = 0; }
		if (Mouse.y < 0) { Mouse.y = 0; }
		OnMouseMoveEventHandler(e)
	}
 
 
	try {
		document.attachEvent("onmousemove", OnMouseMove, true);
	} catch (ex) {
		document.addEventListener("mousemove", OnMouseMove, true);
	}
</script>

Bonsoir,

Regarde du côté de jQuery UI
http://jqueryui.com/demos/draggable/
La librairie dispose d'un widget qui te permettra de faire ce que tu veux.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> $(document).ready(function(){ $("#dragMe").dialog(); $("#dragMe").draggable(); }) </script> <div id="conteneur"> <div id="dragMe" title="News..."> <p> Drag me si tu veux... </p> </div> </div>
Pour le reste, tu réalises un simple script pour gérer tes cookies et pour l'affichage du contenu (provenant d'une base de données par exemple).

Merci. :ccool: Pour les cookies je trouverais sur le net. Je ne sais pas pourquoi j'ai posé la question ici... :aie: