Solved

jQuery: Problem Dragging in IE

Posted on 2011-09-25
4
262 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 36595383
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
ID: 36595418
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
ID: 36595584
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
ID: 36595665
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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

751 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