• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • Last Modified:

jQuery: Problem Dragging in IE

I use the following code to drag an image back and forth.  It works in all browsers except Internet Explorer.  

In IE, it will drag for a short while then it will stop dragging, and the cursor icon changes from a move icon to a circle with a line through it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
#content {
height: 500px;
widht: 100%;
overflow: hidden;
cursor: move;
}

#pan {
margin-left: 0;
}

#message {
position: fixed;
top: 0;
left: 45%;
background: #fff;
border: 2px solid red;
color: red;
width: 200px;
height: 20px;
color: red;
font-weight: bold;
padding: 6px;
text-align: center;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var startX = 0;
 $("#room").mousedown(function (e) {
    var l = Math.round($('#pan').css('marginLeft').replace('px',''));
    startX = l - e.pageX;
    $(this).unbind('mousemove');
        $('#room').mousemove(function (e) {
		var moveX = startX + e.pageX;
		$('#pan').css('marginLeft', (moveX)+'px');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) > 0 ) $('#pan').css('marginLeft', '0');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) < $(window).width() - $('#room').width() ) $('#pan').css('marginLeft', $(window).width() - $('#room').width() + 'px');
		$('#message').html($('#pan').css('marginLeft'));
        });
    return false;
 }).mouseup(function () {
    $(this).unbind('mousemove');
    $('#message').html('');
    return false;
 });
});
</script>
</head>
<body>
<div id="content"><div id="pan"><img id="room" src="http://www.mcuniverse.com/archive/fileadmin/pics/falbums/fa_panoramas/6790-6804_halifax_panorama.jpg" width="6790" alt="" /></div></div>
<div id="message"></div>
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
  • 2
1 Solution
 
David S.Commented:
IE versions before 9 don't support pageX. To find the equivalent value, one has to use clientX and add the scrollLeft values for the documentElement and body to it.

Here's the helper function I use for that:
function mouseX(e) {
  var c=0;
  e=e||window.event;
  if(typeof(e.pageX)=='number') c=e.pageX;
  else if(typeof(e.clientX)=='number') {
    var dE=document.documentElement;
    c=e.clientX+document.body.scrollLeft+(dE?dE.scrollLeft:0);
  }
  return c;
}

Open in new window

0
 
hankknightAuthor Commented:
Thanks for the explanation.  How can I implement a solution?  This does not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
#content {
height: 500px;
widht: 100%;
overflow: hidden;
cursor: move;
}

#pan {
margin-left: 0;
}

#message {
position: fixed;
top: 0;
left: 45%;
background: #fff;
border: 2px solid red;
color: red;
width: 200px;
height: 20px;
color: red;
font-weight: bold;
padding: 6px;
text-align: center;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var startX = 0;
 $("#room").mousedown(function (e) {
    var l = Math.round($('#pan').css('marginLeft').replace('px',''));
    startX = l - e.mouseX;
    $(this).unbind('mousemove');
        $('#room').mousemove(function (e) {
		var moveX = startX + e.mouseX;
		$('#pan').css('marginLeft', (moveX)+'px');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) > 0 ) $('#pan').css('marginLeft', '0');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) < $(window).width() - $('#room').width() ) $('#pan').css('marginLeft', $(window).width() - $('#room').width() + 'px');
		$('#message').html($('#pan').css('marginLeft'));
        });
    return false;
 }).mouseup(function () {
    $(this).unbind('mousemove');
    $('#message').html('');
    return false;
 });
});

function mouseX(e) {
  var c=0;
  e=e||window.event;
  if(typeof(e.mouseX)=='number') c=e.mouseX;
  else if(typeof(e.clientX)=='number') {
    var dE=document.documentElement;
    c=e.clientX+document.body.scrollLeft+(dE?dE.scrollLeft:0);
  }
  return c;
}

</script>
</head>
<body>
<div id="content"><div id="pan"><img id="room" src="http://www.mcuniverse.com/archive/fileadmin/pics/falbums/fa_panoramas/6790-6804_halifax_panorama.jpg" width="6790" alt="" /></div></div>
<div id="message"></div>
</body>
</html>

Open in new window

0
 
David S.Commented:
It's a function, not a property. One needs to replace the two occurrences of "e.pageX" with "mouseX(e)", which results in this:
$(document).ready(function() {
 var startX = 0;
 $("#room").mousedown(function (e) {
    var l = Math.round($('#pan').css('marginLeft').replace('px',''));
    startX = l - mouseX(e);
    $(this).unbind('mousemove');
        $('#room').mousemove(function (e) {
		var moveX = startX + mouseX(e);
		$('#pan').css('marginLeft', (moveX)+'px');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) > 0 ) $('#pan').css('marginLeft', '0');
		if( Math.round($('#pan').css('marginLeft').replace('px','')) < $(window).width() - $('#room').width() ) $('#pan').css('marginLeft', $(window).width() - $('#room').width() + 'px');
		$('#message').html($('#pan').css('marginLeft'));
        });
    return false;
 }).mouseup(function () {
    $(this).unbind('mousemove');
    $('#message').html('');
    return false;
 });
});
function mouseX(e) {
  var c=0;
  e=e||window.event;
  if(typeof(e.pageX)=='number') c=e.pageX;
  else if(typeof(e.clientX)=='number') {
    var dE=document.documentElement;
    c=e.clientX+document.body.scrollLeft+(dE?dE.scrollLeft:0);
  }
  return c;
}

Open in new window

0
 
hankknightAuthor Commented:
Thanks, but there is still a problem.

In Internet Explorer, if you drag the cursor around for more than two seconds, the cursor changes to a "not-allowed" cursor as a circle with a line through it.  Once it does this, the image cannot be dragged as long as the mouse button is still pressed.
drag.png
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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