Apologies for coming back with the same question, as I realize now that I was not clear in my explanation yesterday. You can find the codepen here (please note that it may not open in IE8). My issue is with dragging the 'move-obj' element in IE browsers 8, 9, and 10 when there is an image in the background. How can I modify this demo to work correctly on IE browsers above version 8?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<style>
.wrap{
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
padding: 10%;
}
.wrap-inside{
position: absolute;
top: 100px;
left: 100px;
width: 502px;
height: 502px;
border: 1px solid #ddd;
}
.move-obj{
cursor: move;
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: rgba(0, 0, 0, 0); // adding a background here allows it to work in IE9 and IE10
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#00000000); // does not work in IE8
}
.bg{
top: 102px;
left: 102px;
width: 500px;
height: 500px;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<img class="bg" src="images/img1.jpg" alt=""> // removing this tag makes it work correctly
<div class="wrap-inside">
<div class="move-obj"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$('.move-obj').on('mousedown', function(e) {
var start_x = e.pageX;
var start_y = e.pageY;
var $that = $(this);
var t_left = parseInt($that.css('left'));
var t_top = parseInt($that.css('top'));
$('.wrap-inside').on('mousemove', function(e) {
$that.css({
left: t_left + e.pageX - start_x,
top: t_top + e.pageY - start_y
});
}).on('mouseup', function(e) {
$(this).off('mousemove');
});
});
</script>
</body>
</html>