Sujet Précédent Sujet Suivant

Aide démandée: drag and drop

Darkangel -  
 Foub -
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>

3 réponses

Réponse 1 / 3
sglug Messages postés 22 Statut Membre 3
 
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 ?
0
Réponse 2 / 3
darkangel
 
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!
0
Réponse 3 / 3
Foub
 
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.
0

Discussions similaires

Ressource demandée en cours d'utilisation
Taylow -
Elaura23 -

11 réponses
L'opération demandée nécessite une élévation
daddysnak -
daddysnak -

37 réponses
l'opération demandée necessite une elevation
audrey509 -
lulu -

6 réponses
Transfert de fichier via telephone au PC
Soraya563 -
Pierr10 -

6 réponses
l'opération demandée nécessite une élévation.
tyranosaujre -
tyranaujsore -

4 réponses