Question

我正在尝试使用jQuery插件在我的应用程序中实现drop and drop功能，如下所述：http://farhadi.ir/projects/html5sortable/无论如何，我只能拖动列表对象而不是将它们放在我的项目中。

然后，我尝试了简单的.html文件，它实现了所描述的拖放操作，而没有我应用程序的所有复杂性。

所以，这是代码：

<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>

但即使这样也行不通。网站上提供的示例工作正常，因此必定存在问题。

我是否正确下载并包含了所有需要下载/包含的文件？

Answer 1

我认为你需要关闭li这样的标签：

<ul id="sortable1" class="sortable list">
    <li draggable="true" class style="display: list-item;">Item 1</li>
    <li draggable="true" class style="display: list-item;">Item 2</li>
    <li draggable="true">Item 3</li>
    <li draggable="true">Item 4</li>
    <li draggable="true">Item 5</li>
    <li draggable="true">Item 6</li>
</ul>

fiddle

Answer 2

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

能够拖动但不能删除：jQuery插件

2 个答案: