Visualizzazione dei risultati da 1 a 2 su 2

Discussione: drag and drop

  1. #1

    drag and drop

    Ciao a tutti,ho visto vari script che permettono di fare effetto drag and drop con le immagini, mi chiedevo se fosse possibile memorizzare la posizione di queste immagini in coockie in modo da mantenere la posizione delle immagini impostata dagli utenti ad una riapertura della pagina?? avete qualche script di esempio ??

  2. #2

    ho trovato questo codice

    che fa al caso mio, ma vorrei aggiungere più div,mi date una mano.... scusatemi ma il javascript non è il mio forte,spero di poter ricambiare con consigli in asp

    codice:
    <html>
    
    <head>
    <title>Prova</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>
    
    
    </body>
    
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.