Aide démandée: drag and drop

Darkangel, le samedi 17 avril 2004 à 23:22:21

Bonjour a tous,

ca fais longtemps que je traine ce code quil faudrait pouvoir modifie afin de pouvoir mettre plusieurs layers dont la positions s'enregistre dans le meme cookie!
est ce possible?
et si oui comment...
Merci d'avance

<html>

<head>
<title>Record Drag/Drop Position</title>

<script type="text/javascript">
// Write session or persistent cookies
function setCookie(cookieName,cookieValue,cookieExpiration) {
    
	if (cookieExpiration!=null) {
        // Cookie has a duration / date object is expected
		document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/;expires=" + cookieExpiration.toGMTString()
    } else {
        // Cookie has no duration / it will remain only for the browser session
		document.cookie=cookieName + "=" + escape(cookieValue) + ";path=/"
    }
}

// Get cookie value
function getCookie(cookieName) { 

	cookieString=document.cookie
    cookieName+="="
    
	// If at least one cookie exists...
    if (cookieString.length>0) {
        
		// Search for the cookie name
		i=cookieString.indexOf(cookieName)
        
		// If the cookie name exists, return its value
        if (i!=-1) {
            i += cookieName.length
            j = cookieString.indexOf(";",i)
            
            if (j==-1) {j = cookieString.length}
            
            return unescape(cookieString.substring(i,j))
        }
    }

    // Return a null value if the cookie doesn't exist
	return null
}

// Delete a cookie
function deleteCookie(cookieName) {
	
	// Get a date object for the 1st january 1970
	cookieExpiration = new Date(1970,0,1)
	// Set cookie value to an empty string and its expiration date to the 1st january 1970
	document.cookie=cookieName + "=;path=/;expires=" + cookieExpiration.toGMTString()
}

// Get object left position, even if nested
function getAbsLeft(o) {
	oLeft = o.offsetLeft
	while(o.offsetParent!=null) {
		oParent = o.offsetParent
		oLeft += oParent.offsetLeft
		o = oParent
	}
	return oLeft
}

// Get object top position, even if nested
function getAbsTop(o) {
	oTop = o.offsetTop
	while(o.offsetParent!=null) {
		oParent = o.offsetParent
		oTop += oParent.offsetTop
		o = oParent
	}
	return oTop
}

// Set object left position
function setLeft(o,oLeft) {
	o.style.left = oLeft + "px"
}

// Set object top position
function setTop(o,oTop) {
	o.style.top = oTop + "px"
}

// Set object top and left positions
function setPosition(o,oLeft,oTop) {
	setLeft(o,oLeft)
	setTop(o,oTop)
}

// Mouse button down handler
function dragMouseDown(e)
{
	// Get the event object for IE
	if (!e) {e = window.event}
	
	// Dragging begins...
	doDrag=true
	
	// Get a reference to the dragged object
	o=document.getElementById("draggedObject")
	
	// Get original top and left positions of the dragged object
	oLeft=getAbsLeft(o)
	oTop=getAbsTop(o)
	
	// Get the mouse cursor position into the dragged object surface
	mouseLeft=e.clientX-oLeft
	mouseTop=e.clientY-oTop
	
}

// Mouse button up handler
function dragMouseUp(e)
{
	// Dragging stops
	doDrag=false

	// Get the event object for IE
	if (!e) {e = window.event}
	
	// Store the position of the dragged object
	// as a cookie / the cookie value is a snippet of JavaScript
	oLeft = e.clientX-mouseLeft
	oTop = e.clientY-mouseTop
	cookieValue = "var oLeft=" + oLeft + ";" + "var oTop=" + oTop
	setCookie("recPos",cookieValue,expirationDate)

}

// Mouse move handler
function dragMouseMove(e)
{
	// Get the event object for IE
	if (!e) {e = window.event}
	
	// If dragging is on going...
	if (doDrag)
	{
		// Get a reference to the dragged object
		o=document.getElementById("draggedObject")
		
		// Set the top and left positions of the dragged object relatively to the mouse cursor
		oLeft = e.clientX-mouseLeft
		oTop = e.clientY-mouseTop
		setPosition(o,oLeft,oTop)
		
		// Stop event propagation
		return false
	}	
}

// Show last recorded position
function getRecPos()
{
	alert(getCookie("recPos"))
}

// At page load, look for a recorded position
// If so, move the dragged object to the last recorded position
function setRecPos()
{
	cookieValue = getCookie("recPos")
	if (cookieValue!=null)
	{
		// Interpret the snippet of JavaScript stored in the cookie
		eval(cookieValue)
		
		// Move the dragged object to the last recorded position
		o=document.getElementById("draggedObject")
		setPosition(o,oLeft,oTop)
	}
}

// Set the expiration date 5 days ahead in the time
expirationDate = new Date()
expirationDate.setDate(expirationDate.getDate() + 5)

doDrag=false
mouseLeft=0
mouseTop=0

document.onmousemove = dragMouseMove
</script>

</head>

<body onload="setRecPos()">

<div id="draggedObject" style="position:absolute;top:100px;left:100px;width:80px;height:80px;cursor:pointer;cursor:hand;background-color:green" onmousedown="dragMouseDown(event)" onmouseup="dragMouseUp(event)"></div>

<button onclick="getRecPos()">Get recorded position</button></br>
Drag object, close the demo page and re-open it to see the end result.

</body>

</html>

Répondre à Darkangel Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

sglug, le dimanche 18 avril 2004 à 05:17:27

je voit pas trop ou est ton probleme?
ne serait ce pas de la parraisse ? :-)
si tu ecrit dans le cookie les valeur des positions de tes objets
en chargeant la page tu regarde si tu a les valeur dans ton cookie et tu repositione ton objet ?

Répondre à sglug

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

darkangel, le dimanche 18 avril 2004 à 10:38:35

Oula ne nous meprenons pas!!
ce n'est pas moi qui est ecrit ce script tout de meme je n'ai pas encore le niveau...
cepdenant j'aimerais bien pouvoir voir deux layers qui fonctionne et dont la position s'enregistre dans le meme cookie histoire de bien voir comment ca marche car j'ai deja essayer mais disons que ca marche pas trop et que ca fais quelque chose de tres chelou
..
donc please help me..
et je confirme ce n'est pas de la paresse j'ai deja essayer!!! sans resultat!

Répondre à darkangel

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Foub, le mercredi 9 mai 2007 à 17:02:43

Sous IE6, en utilisant le script ci-dessus, j'ai un problème de performance : le calque se déplace au ralentit...
Pourtant ma machine est un P4 à 3Ghz... alors que sous firefox, aucun problème...

J'ai également le même problème de performance en utilisant la librairie wz_dragdrop... Avez-vous une idée de quoi cela peut venir ?

Merci,
F.

Répondre à Foub

Posez votre question Répondre

Javascript drag and drop et transparence (Résolu)Bonjour, j'ai réalisé un drag and drop qui marche et j'aimerais que le bloc que je déplace soit transparent (environ 60 %). Et là je coince. Comment faire ? Avec une propriété css ? compatible avec tous les navigateurs ? si quelqu'un a... www.commentcamarche.net/forum/affich-7557863-javascript-drag-and-drop-et-transparence

Digidesign TransfuserDigidesign Transfuser,,Digidesign Transfuser, Groove Creator Plugin for RTAS, Easily create, tweak, arrange, and perform grooves on the fly right within Pro Tools, Musically intelligent randomization, Supports full drag and drop of Pro Tools regions and a www.commentcamarche.net/guide-achat/digidesign-transfuser-484003477-fiche-technique

SONY SOUND FORGE 9.0SONY SOUND FORGE 9.0,,Sony Sound Forge 9.0 - professional audio editing software. Multi-channel support for processing and recording, drag-and-drop editing, phase and mono-compatibility meter, wet/dry mix and crossfade options for effects, spectrum analyz www.commentcamarche.net/guide-achat/sony-sound-forge-9-0-459183510-fiche-technique

Disk boot failure - Insert system disk and press EnterLe message d'erreur «DISK BOOT FAILURE INSERT SYSTEM DISK AND PRESS ENTER», «Disque non système» ou «No system disk» signifie que l'ordinateur n'a pas trouvé de système d'exploitation sur lequel démarrer (booter). Les causes de ce message d'erreur... www.commentcamarche.net/faq/sujet-2792-disk-boot-failure-insert-system-disk-and-press-enter

Java (Résolu)Bonjour, J'aimerai créer un logiciel du type visio, c'est à dire avoir une liste d'éléments à ma gauche et faire du drag and drop afin de déssiner des organigrammes. Pour l'instant j'ai créer une classe gr qui m'affiche... www.commentcamarche.net/forum/affich-3848531-java

[python] probleme avec une image et tkinter (Résolu)Bonjour, je suis en train de faire un mastermind et je me suis fais une fonction drag and drop qui marche, quand je relache le bouton de la souris il affiche une image la ou est le curseur mais si je recommence a drage quelque chose, il la supprime... www.commentcamarche.net/forum/affich-2750874-python-probleme-avec-une-image-et-tkinter

Gravage de DVD (Résolu)Bonjour, Mon graveur"Drag'h Drop CD+DVD grave les DVD-R mais pas les DVD-rw peut on m'aider merci d'avance FM www.commentcamarche.net/forum/affich-4968497-gravage-de-dvd

Télécharger TaskBar ShuffleTout simple mais pratique: Ce programme permet de déplacer les tâches dans la barre des tâches par simple drag-n-drop (glisser-déposer). Optionnellement, il peut également grouper automatiquement les fenêtres (par exemple, pour garder ensembles les... www.commentcamarche.net/telecharger/telecharger-246-taskbar-shuffle

Télécharger AndreaMosaicAndreaMosaic permet de créer une mosaïque d'images, c'est à dire d'utiliser des centaines d'images pour en créer une autre. Exemple: Voici une fleur de lotus créée à l'aide d'images diverses: ou encore un chien: Voir aussi Foto-Mosaik. www.commentcamarche.net/telecharger/telecharger-3673473-andreamosaic

Tristan And The Mystery Of The DragonTristan And The Mystery Of The Dragon,, www.commentcamarche.net/guide-achat/tristan-and-the-mystery-of-the-dragon-374043-fiche-technique

Heroes of Might and Magic : Quest for the DragonBone StaffHeroes of Might and Magic : Quest for the DragonBone Staff,, www.commentcamarche.net/guide-achat/heroes-of-might-and-magic-quest-for-the-dragonbone-staff-83353-fiche-technique

Tiger and DragonTiger and Dragon,, www.commentcamarche.net/guide-achat/tiger-and-dragon-340280-fiche-technique

Le jeu de la semaine : "Dragon Quest" arrive sur DS(Paris - Relax news) - La console portable de Nintendo accueille jeudi 11 septembre le remake du 4ème volet de la série japonaise Dragon Quest sous le nom Dragon Quest : L'épopée des Elus.Afin d'empêcher Death Pisaro de mettre fin à l'espèce humaine... www.commentcamarche.net/actualites/le-jeu-de-la-semaine-dragon-quest-arrive-sur-ds-5847298-actualite.php3

Toutes les techniques pour draguer sur le Net réunies dans un guide(Paris - Relax news) - secrets de la séduction en ligne est un guide pour les hommes souhaitant faire des rencontres sur la toile. il donne de précieux conseils à ces messieurs pour draguer sur des sites comme meetic.fr ou match.com. disponible au... www.commentcamarche.net/actualites/toutes-les-techniques-pour-draguer-sur-le-net-reunies-dans-un-guide-3831800-actualite.php3

Toutes les réponses pour « Aide démandée: drag and drop »