Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 249
  • Last Modified:

Move multiple gif files and record position using Ms access

I have found something similiar to wad i want. and the codes are as below..However It jus applies to gif file..

1) how can i make it move let's say i added more gifs? And everytime I select on the item and move it will drag and drop too.

2) I also want to make it record in access database using ASP Each time the position has been changed and is shown on screen. Possible?


This found script uses cookies. So does that mean if it loads onto another computer the position will be different after open from another computer? Can anyone help?? 500 pts for grabs! Thanks so much!

<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:red" 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>
0
Yannie
Asked:
Yannie
1 Solution
 
YannieAuthor Commented:
alternatively,
This can be used too..

I got 2 files there..this looks simpler but how do i Incorporate wif ASP? Thanks!

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.drag{
position:relative;
cursor:crosshair;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

</script>
</head>

<body>

<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>
<h1><b class="drag">Move this</b></h1>


</span>
</body>
</html>
0
 
kelvinwkwCommented:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.drag{
position:relative;
cursor:crosshair;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

                                    
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}else{
      document.getElementById("xVal").innerHTML = this.x;
      document.getElementById("yVal").innerHTML = this.y;
      // says this is the file to update
      makeRequest("file.asp?xLoc="+this.x+"&yLoc="+this.y);
      
}
}
}

dragobject.initialize()

    var http_request = false;

    function makeRequest(url) {
        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = displayContents;
        http_request.open('GET', url, true);
        http_request.send(null);
    }

    function displayContents() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.getElementById('userlist').innerHTML = http_request.responseText;
            } else {
                alert('There was a problem with the request.' + http_request.status);
            }
        }
    }
</script>
</head>

<body>
X <span id="xVal"></span><br/>
Y <span id="yVal"></span>
<h1><b class="drag">Move this</b></h1>


</span>
</body>
</html>
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now