Solved

jQuery: Problem Dragging in IE

Posted on 2011-09-25
4
253 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.
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

863 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

26 Experts available now in Live!

Get 1:1 Help Now