EasyUI + JQuery Sortable 实现可拖动工作台功能。

HTML

<div data-options="region:'center'">
        <div class="work_plat_column work_plat_column_left">
            <div class="easyui-panel work_plat_cell" title="历史">
                <p>123</p>
            </div>
            <div class="easyui-panel work_plat_cell" title="历史2">
                <p>123</p>
            </div>
        </div>
        <div class="work_plat_column work_plat_column_right">
            <div class="easyui-panel work_plat_cell" title="销售漏斗">
                <p>123</p>
            </div>
            <div class="easyui-panel work_plat_cell" title="销售漏斗2">
                <p>123</p>
            </div>
        </div>
    </div>

 

对应CSS

.work_plat_column {float: left; padding: 10px;}
.work_plat_column_left {width: 40%; float: left;}
.work_plat_column_right {width: 57%; float: right;}
.portlet-placeholder {border: 1px dotted black;margin-top: 10px; height: 50px;}

 

从Jquery下载 Sortable插件js引用。

 

JS代码

$(function () {
    $(".work_plat_column").sortable({
        connectWith: '.work_plat_column',
        handle: '.panel-title',
        placeholder: "portlet-placeholder",
        revert: 'invalid',
        option: 'appendTo',
        stop: function (event, ui) {
            ui.item.find(".work_plat_cell").panel();
        }
    });
    $(".work_plat_cell").parent().css("margin-top", "10px");
    $(".work_plat_column").find(".panel-header").css("cursor","move");
});

 

其中代码 

stop: function (event, ui) {
　　ui.item.find(".work_plat_cell").panel();
}
是使拖动后元素自适应当前容器宽度。

转载于:https://www.cnblogs.com/chenliang-zibo/p/4434777.html