83 en ligne

Comparateur | Sites | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre

Recherche

Newsletter

Drag and Drop Javascript

Code JavaScript par Balin

<Accueil> Déjà 696 codes !

AJAX [5]	AS 2.0 [1]	ASP [111]	ASP.NET [34]	CSharp [11]	CSS [14]
D [1]	Delphi [5]	DHTML [3]	Divers [5]	HTML [16]	JavaScript [154]
JSP [9]	Maths [1]	PHP [256]	PHP5 [18]	PowerShell [22]	Regex [4]
SQL [2]	V.Basic [4]	VBScript [13]	VS.NET [5]	WPF [1]	XML [1]

JavaScript - Drag and Drop Javascript

Salut,
Ce code simple vous permet d'effectuer un drag and drop sur une DIV ou autre
Effet garanti sur une appli Ajax et multifenêtrage.

Ne pas oublier le position absolute sinon la Div ne bougera pas

Bon coding

JavaScript
Pour pouvoir le télécharger, connectez-vous ! ;)
<html>
<head>

<script language=javascript>

        //----------------------------------------------------------
        //
        //      Fonction de Drag & drop
        //
        //----------------------------------------------------------
        var dragging;
        var resize;
        var divtodrag;
        var decalagex;
   var decalagey;


        function drag(objet){
                divtodrag = document.getElementById(objet);
                decalagex = event.x + document.body.scrollLeft - divtodrag.offsetLeft;
                decalagey = event.y + document.body.scrollTop - divtodrag.offsetTop;
                divtodrag.style.zIndex = 1999;
                dragging = true;}

        function drop(){
            if(dragging == true)
                    {
                        divtodrag.style.zIndex = 0;
                        dragging = false;
                        divtodrag = "";
                        decalage = 0;
                    }
            }

        function move()
            {  if (dragging == true)
                    {
                     divtodrag.style.left = (event.x + document.body.scrollLeft) - decalagex;
                     divtodrag.style.top = (event.y + document.body.scrollTop) - decalagey;
                    }
            }

</script>

</head>
<body onmouseup="drop()" onmousemove="move()">

<div id="divtest" onmousedown="drag('divtest')" style="position:absolute;">
   <table bgcolor="blue" width=50px height=50px>
       <tr><td></td></tr>
   </table>
</div>
</body>
</html>

Proposé par Balin le 27/11/2008 [vu 11766 fois]

bluedemon 01/12/08	Le code est propre mais pas compatible firefox 3. Bonne journée.
Balin 01/12/08	Ah oui c'est possible :/ Je n'ai testé que sous IE. Merci pour la précision en tout cas Si un jour j'ai le temps je verrais pour l'adapter à Firefox.

Pour participer, il faut d'abord vous identifier !

284 visiteurs ont déjà participé dont :

DB77 [47]	fmarie [26]	Fabrice69 [25]	CedX [25]	Didier [22]
tedheu [21]	Bisou [20]	mohman [17]	jreaux62 [16]	romuluslepunk [15]
foxmaster [15]	Vonscott [12]	iubito [10]	Redo [9]	Balin [8]
poppy [7]	fmaunier [6]	cyrillus [6]	pseudomenace [6]	david96 [6]
CrazyCat [5]	antoun [5]	Pozzy [5]	TBliss [5]	Aurelien [5]
daoudi [5]	Ours [5]	bahdot [5]	houcem_tsp [4]	Chrigou [4]
debackp [4]	lex [4]	hyoucef [4]	Jips [4]	zut69 [3]
salem [3]	berguerand01 [3]	phenixbd [3]	twins20 [3]	kandal [3]
mhaido [3]	mcorgnet [3]	philouonline [3]	master-killer [3]	Maclearner [3]
crocxx [3]	laetyboop [3]	Poucet [3]	olivierland94 [3]

	Téléchargez gratuitement et légalement des logiciels Microsoft ! Si, si ;)
Visual Studio 2010 Office 2010 Expression Studio 3 SQL Server 2008 et d'autres...

Au fil des news

Adobe - Adobe lance des applications Photoshop Express....

PHP - Détermination de l'intersection entre 2 segments

Magazines - Le N°132 de Programmez est disponible

Les alertes dans SharePoint 2007 - Comment SharePoint 2007 gère les User Alerts
Une des fonctionnalités de base de SharePoint, aussi bien dans Windows SharePoint Services (WSS) ...

Adobe - Photoshop.com Mobile pour Android 1.2

Adobe - Adobe dévoile une technologie de lecture.......

PHP - Experts PHP : participez au Forum PHP 2010 !

PHP - Fobec.com - Code source PHP & javascript

Foliotage alphabétique - Lister sur la première lettre d'un champ
Pour faire suite à l'article de JPierre sur la pagination alphabétique, voici, en ASP et en PHP, ...

Dreamweaver CS4 + Php + Mysql - Pagination alphabétique
Je vous propose la création d'une barre de navigation ou pagination alphabétique pour filtrer les ...

Adobe - HTML5 dans Dreamweaver CS5

VBScript - Déterminer si un chemin est absolu ou relatif

VBScript - Lire/écrire un fichier texte

Magazines - Le N°130 de Programmez est disponible

Hebergement - Hébergement à prix libre

Adobe - Adobe Creative Suite 5

PHP - Calcul de la date de Pâques

Magazines - Le N°128 de Programmez est disponible

Magazines - Le N°127 de Programmez est disponible

Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...

Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1

JavaScript - Ajouter une page dans vos favorites

Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 -
Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ...

SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint
Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ...

Magazines - Le n°126 de Programmez est disponible

Outils - Traducteur en ligne automatique pour site web

Adobe - Adobe Photoshop.com Mobile pour Iphone

Magazines - Le n°125 de Programmez est disponible

Adobe - Adobe AIR 2 et Flash Player 10.1version bêta

Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements
Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ...

Magazines - Le n°124 de Programmez est disponible

PHP - Forum PHP 2009

Composants - eFace - XAML en Java

WPF - Désactiver le bouton de réduction d'une fenêtre

Magazines - Le n°123 de Programmez est disponible

Magazines - Le n°122 de Programmez est disponible

Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint
Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ...

SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0
Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ...

Magazines - Le HS N° 1 de Web Design est disponible

Outils - EntityBuilder

	Tutorial : HTML \| Scripting \| ASP-PHP \| ASP.net \| SQL Server \| XML Sharepoint \| XAML \| Pocket \| Dreamweaver \| VML \| Divers Scripts : Scripting \| ASP-PHP \| ASP.net \| Divers Boutique \| Annuaire \| Bannières \| Météo \| Tribune \| Partenariats \| Recherches	v4.3 © Didier YVER 2001-2010
	Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces