Solved

jQuery: Problem Dragging in IE

Posted on 2011-09-25
4
251 Views
Last Modified: 2012-06-27
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
Comment
Question by:hankknight
  • 2
  • 2
4 Comments
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 
LVL 16

Author Comment

by:hankknight
Comment Utility
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
Comment Utility
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
 
LVL 16

Author Comment

by:hankknight
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now