Javascript 通过div使用JQuery可拖动排序表

我正在尝试创建一个网格，其中填充了可拖动和可排序的“小部件”，理想情况下带有某种占位符虚线边框，表示它们将要去的地方

当前我的HTML标记如下所示：

<div id="widget-1" class="box grid_8">
    <div class="box-header">
        <i class="fa fa-dropbox fa-fw"></i> <p>New Orders</p>

    </div>
    <div class="box-content">
        <h1>926</h1>
        <h2>New <strong>Orders</strong></h2>
        <p class="grey-text">Need Your Attention</p>
        <a href="#" class="button">Take Me There</a>
    </div>
    <div class="box-footer">
        <a href=""> <i class="fa fa-cog fa-fw"></i> </a>

    </div>
</div>

Js:

---

这应该对您有所帮助：

主要变化是增加了：

.ui-state-highlight {
    background:#eee;
    border:1px dotted #333;
    height:250px;
    width:386px;
    margin:10px 0;
}

placeholder: "ui-state-highlight"

---

JS/jQuery也请…目前我的JS看起来非常像文档，我已经更新了我的代码以反映这一点。您正在将可排序应用到代码中没有的

sortable

div。不要直接复制文档您需要对jQuery有基本的了解才能使用插件。我的插件不好，更新了，但从我所看到的来看，它需要在列表中？如果您被卡住了，请退出或退出

$(function() {
    $("#widget-1").sortable({containment: "parent"});
    $("#widget-1").disableSelection();
});

.ui-state-highlight {
    background:#eee;
    border:1px dotted #333;
    height:250px;
    width:386px;
    margin:10px 0;
}

placeholder: "ui-state-highlight"