拖放可以在线工作，但不能在本地工作？答案

【问题标题】：Drag and Drop working in online but not locally?拖放可以在线工作，但不能在本地工作？
【发布时间】：2013-12-11 06:44:23
【问题描述】：

请看这个小提琴：http://jsfiddle.net/hvncN/ 这个 fiddle 实现了一个简单的 Drag and Drop 列表并且工作正常。

当我使用 Wamp Server localhost 运行相同的代码时，它运行良好。但无论如何，当我尝试在我的笔记本电脑中本地执行此操作时（没有 wamp 服务器），我无法执行此操作。

所以，这里是代码：

<HTML>
<HEAD>
</HEAD>
<BODY>



<section id="demos">
    <h1>Demos</h1>
    <style>
        #demos section {
            overflow: hidden;
        }
        .sortable {
            width: 310px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .sortable.grid {
            overflow: hidden;
        }
        .sortable li {
            list-style: none;
            border: 1px solid #CCC;
            background: #F6F6F6;
            color: #1C94C4;
            margin: 5px;
            padding: 5px;
            height: 22px;
        }
        .sortable.grid li {
            line-height: 80px;
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        .handle {
            cursor: move;
        }
        .sortable.connected {
            width: 200px;
            min-height: 100px;
            float: left;
        }
        li.disabled {
            opacity: 0.5;
        }
        li.highlight {
            background: #FEE25F;
        }
        li.sortable-placeholder {
            border: 1px dashed #CCC;
            background: none;
        }
    </style>

    <section>
        <h1>Sortable List</h1>
        <ul id="sortable1" class="sortable list">
            <li draggable="true" class style="display: list-item;">Item 1
            <li draggable="true" class style="display: list-item;">Item 2
            <li draggable="true">Item 3
            <li draggable="true">Item 4
            <li draggable="true">Item 5
            <li draggable="true">Item 6
        </ul>
    </section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
    <script src="/html5sortable/jquery.sortable.js"></script>
    <script>
        $(function() {
            $('#sortable1, #sortable2').sortable();
            $('#sortable3').sortable({
                items: ':not(.disabled)'
            });
            $('#sortable-with-handles').sortable({
                handle: '.handle'
            });
            $('#sortable4, #sortable5').sortable({
                connectWith: '.connected'
            });
        });
    </script>
</BODY>
</HTML>

这是控制台日志中的错误：

Failed to load resource file:///C:/html5sortable/jquery-1.7.1.min.js
Failed to load resource file:///C:/html5sortable/jquery.sortable.js
Uncaught ReferenceError: $ is not defined

为什么代码在 Fiddle 和 Wamp Server 上可以正常工作，但以 file:///C:/wamp/www/test.html 单独打开时却不行

我希望它能够在没有 Wamp Server 的情况下完全离线工作，因为我稍后会将所有这些文件放入一个 Hybrid Android App 中离线工作。我该怎么做才能让它离线工作？

【问题讨论】：

jquery 文件在正确的目录中吗？检查您的浏览器控制台是否有任何此类错误。
您是否缺少 jQuery UI 1.8.18？
您在 Javascript 控制台中看到任何错误吗？在浏览器中打开页面时是否加载了 jQuery 文件？
@hanish.kh 请查看已编辑的问题。
@ShivamChopra 现在正在工作。谢谢。只是我在加载.js文件的相对地址开始前多了一个'/'。

标签： javascript jquery html css

【解决方案1】：

在您定义的相对地址中有一个额外的“/”。删除它。

【讨论】：

【解决方案2】：

这与您的笔记本电脑无关，但与您的浏览器支持有关。使用开发者工具（如firebug）并跟踪错误。然后，我们可以帮助您

【讨论】：

【解决方案3】：

嘿，我刚刚检查了它在本地和在线的工作正常......你只是错过了 jquery 库......

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

或者在本地下载jquery库，放到js文件夹中，如下图：

<script src="js/jquery.min.js"></script>

一切顺利……

【讨论】：

【解决方案4】：

从您在代码中提供的路径中删除 /。

【讨论】：