Déplacer une DIV en absolue

Mammouth du PHP | 959 Messages

09 juil. 2008, 01:44

Bonsoir,

Je suis en train de réaliser windows en html/css et bien sur, JavaScript... question de m'exercer en JS

Et je bloque sur les déplacements des icônes... (Drag & Drop)

J'ai cherché sur le Web, j'ai trouvé plusieurs codes, mais je trouve qu'ils sont très difficiles à intégrer... :roll:
De plus, je ne comprends pas vraiment ses codes avec généralement beaucoup de fonctions... :roll:

Et comme dans mon windows il y a plusieurs icones (2 pour l'instant : poste de travail et la corbeille) qui sont placés en div (absolute) du nom :
Poste de travail : nom de la div : pdt_div
Corbeille : nom de la div : db_div db pour DustBin

Mais j'ai fais un tableau (Array) qui me sers déjà... (je détail pas), le voici :
var icons_list = new Array('pdt', 'db');
Donc avec ça, on peux faire une FOR pour attribuer les evenènements

Se qui donne :
	var nb_value_icons_list = icons_list.length;
	for( i=0; i < nb_value_icons_list; i++ ){ // La boucle pour attribuer les évènements
		// Donc nom du div absolute des icones : icons_list[i]+'_div'
                // .....
                // Attribution des évènements avec icons_list[i]+'_div'....
                
	}
Après le reste je sais pas trop :roll:


Merci de votre aide !

Modérateur PHPfrance
Modérateur PHPfrance | 2575 Messages

09 juil. 2008, 04:06

Voici un topic qui traite du drag&drop : http://www.phpfrance.com/forums/voir_su ... drag-0.php
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

Mammouth du PHP | 959 Messages

09 juil. 2008, 11:52

Ok, mais moi j'ai pas d'emplacement réservé à se que je déplace... je peux déplacer tout et n'importe comment (c'est des icônes).

J'ai compris ta fonction selectMembre() mais celle au relaché, pas vraiment, mais elle est faite pour s'accrocher à un autre élément de la page, moi, il me faut que ça s'accroche à rien ;p

Alors j'ai déjà commencé :

Code : Tout sélectionner

function selectIcon(icon){ icon_select = icon; }
Le code HTML de l'icône:

Code : Tout sélectionner

<div id="pdt_div" onmousedown="clear_all_icons_filter(); show_shadown('pdt'); selectIcon(this);" class="icon icon_pdt"><img src="./images/icons/pdt.png" id="pdt_i" alt="" title="Poste de Travail" /><br /><span id="pdt">Poste de travail</span></div>
Voilà voilà, merci ;p

EDIT : Wouaa je suis trop content !
Après des heures de recherche, je tombe sur le site de Yahoo, j'ai réussi à faire ce simple drag and drap et en cherchant encore sur ce site, j'ai trouver pour déplacer tout en laissant l'objet d'origine à sa place, et quand on lache, cette objet viens d'un coup sec, exactement comme quand vous déplacer une icône ;p Comme ça (gros carré)

et avec un petit

Code : Tout sélectionner

opacity:0.8; filter : alpha(opacity=80);
L'icône devient un peu transparent !! :D

C'est ici pour voir le résultat :D

http://server.chrislabricole.fr/windows/

Bien sur, j'ai pas du tout fini, je vais essayer de faire un maximum de chose comme les fenêtres, genre calculatrice, etc etc....

PS: je voulais faire le code moi même mais bon ^^ la c'est trop beau pour que je renonce :)