Solved

jQuery: Problem Dragging in IE

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

Independent Software Vendors: 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!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

740 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