JqueryUI Draggable 在 IE 中不起作用？答案

【问题标题】：JqueryUI Draggable not working in IE?JqueryUI Draggable 在 IE 中不起作用？
【发布时间】：2015-07-29 09:31:35
【问题描述】：

我正在使用 JQueryUI 来帮助处理此页面上的可移动项目：

http://www.hiredavewaring.com

如果您向下滚动，您会看到 png，您可以抓取并在我的脸上移动以创建 Mr. PotatoHead 类型的效果。

我知道它不是世界上最漂亮的代码，但它在除 Internet Explorer 之外的所有浏览器上都运行良好。

有谁知道帮助这些项目在 IE 中可拖动的修复方法？

这是没有 Google Analytics 或 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>

谢谢，戴夫

【问题讨论】：

如果您将 'type="text/javascript"' 放在包含可拖动调用的脚本标记中会发生什么？
您使用的是非常旧的 jQuery 和 jQuery UI 版本，请考虑升级。此外，您可以将所有 jQuery 代码合并到一个 document.ready 块中，这可能不会解决任何问题，但肯定会清理您的代码。
当我尝试该解决方案时没有任何反应。
我现在将更新 JQuery 版本并很快报告。谢谢你的建议，MrOBrian。
那还是不行。那些 PNG 卡在它们所在的位置。我会继续在谷歌上搜索这个问题，看看我是否能找到另一个类似的问题。

标签： jquery internet-explorer draggable jquery-ui-dialog jquery-ui-draggable

【解决方案1】：

首先，我会将您的代码限制为单个 $(function(){});。

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

更重要的是，draggable 需要 jQuery UI 1.8.6 或更高版本才能在 IE9 中工作。还有一个patch 可用于旧版本，但我真的建议升级。

【讨论】：

添加一个唯一的选择器类并像这样声明：$('.draggable-element').each(function(){$(this).draggable();})
一个非常好的建议。您甚至可以使用当前的标记来实现这一点，例如 $('.draggable').children('div').each(function(){$(this).draggable();})
这是解决方案，您清理了我的代码。谢谢！感谢上面的 MrObrian，他也表示这是问题所在。我只是对 Jquery 了解不够，无法正确遵循他的解决方案。 ——
我动态添加了一个列，然后在我们销毁并在添加新列后再次初始化时它不起作用。所以请建议我们如何做到这一点，我们也使用 jquery UI 1.11.4 版本。