CODEWITHSUNDEEP
jqueryinternet-explorerdraggablejquery-ui-dialogjquery-ui-draggable
DWaringORL
DWaringORL

Reputation: 25

JqueryUI Draggable not working in IE?

I'm using JQueryUI to help with the moveable items on this page:

http://www.hiredavewaring.com

If you scroll down, you'll see the png's that you can grab and move over my face to create a Mr. PotatoHead type effect.

I know it's not the prettiest code in the world, but it is working great on every browser, except Internet Explorer.

Does anyone know a fix to help these items become draggable in IE?

Here's the code without the Google Analytics or Meta:

<link rel="stylesheet" type="text/css" href="css/swagger.css" />

<!-- Draggable Pics -->
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<!-- end Draggable Pics -->

</head>

<body>

<div id="wrapper3">

  <div id="coverleftside1">
        <div id="dave3">
        <img src="images/dave3.png" alt="David Lee Waring, a Graphic and Web Designer in Orlando, FL">
        </div>
  </div>
    <div id="coverrightside1">

    </div>
    <div class="clear">
    </div>
    <div id="sig">
    <img src="images/logo2.png" alt="David Lee Waring, a Graphic and Web Designer in Orlando, FL">
    </div>
    <div id="nav3">
    <ul>
            <li><a href="http://www.hiredavewaring.com/index.html" >Home</a></li>
            <li><a href="http://www.hiredavewaring.com/about.html"  >About</a></li>
            <li><a href="http://www.hiredavewaring.com/design.html" >Portfolio</a></li>
            <li><a href="http://www.hiredavewaring.com/contact.html"  >Contact</a></li>
            <li><a href="http://www.hiredavewaring.com/blog" >Blog</a></li>
      </ul>
    </div>
    <p>Grafiti Time!  Click on an image below and drag it over Dave's face. Send us a screen shot of your favorite combination.</p>
    <a href="http://www.hiredavewaring.com"> Click Here to reset and start over. </a>
<div class="draggable">   
<div class="demo"><img src="images/funnyface/glassesnose.png" alt="Move me over Dave's Face!" ></div>
<div class="demo2"><img src="images/funnyface/beard1.png" alt="Move me over Dave's Face!" ></div>
<div class="demo3"><img src="images/funnyface/beard2.png" alt="Move me over Dave's Face!" ></div>
<div class="demo4"><img src="images/funnyface/beard3.png" alt="Move me over Dave's Face!" ></div>
<div class="demo5"><img src="images/funnyface/must1.png" alt="Move me over Dave's Face!" ></div>
<div class="demo6"><img src="images/funnyface/must2.png" alt="Move me over Dave's Face!" ></div>
<div class="demo7"><img src="images/funnyface/eyesangry.png" alt="Move me over Dave's Face!" ></div>
<div class="demo8"><img src="images/funnyface/eyescross.png" alt="Move me over Dave's Face!" ></div>
<div class="demo9"><img src="images/funnyface/eyesgoogle.png" alt="Move me over Dave's Face!" ></div>
<div class="demo10"><img src="images/funnyface/eyesscared.png" alt="Move me over Dave's Face!" ></div>
</div> 
<SCRIPT>
$(function(){
    $('.demo')
        .draggable();
});
$(function(){
    $('.demo2')
        .draggable();
});
$(function(){
    $('.demo3')
        .draggable();
});
$(function(){
    $('.demo4')
        .draggable();
});
$(function(){
    $('.demo5')
        .draggable();
});
$(function(){
    $('.demo6')
        .draggable();
});
$(function(){
    $('.demo7')
        .draggable();
});
$(function(){
    $('.demo8')
        .draggable();
});
$(function(){
    $('.demo9')
        .draggable();
});
$(function(){
    $('.demo10')
        .draggable();
});
</SCRIPT>
<!-- End Draggable -->

</div>

</body>
</html>

Thanks, Dave

Upvotes: 1

Views: 7122

Answers (1)

Jeemusu
Jeemusu

Reputation: 10533

Firstly, I would limit your code to a single $(function(){});.

$(function(){
    $('.demo').draggable();
    $('.demo2').draggable();
    $('.demo3').draggable();
    $('.demo4').draggable();
    $('.demo5').draggable();
    $('.demo6').draggable();
    $('.demo7').draggable();
    $('.demo8').draggable();
    $('.demo9').draggable();
    $('.demo10').draggable();
});

More importantly, draggable requires jQuery UI 1.8.6 or greater to work in IE9. There is also a patch available for older version, but I would really recommend upgrading.

Upvotes: 3

Related Questions