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

浏览数：60 / 时间：2015年06月09日

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();
}
是使拖动后元素自适应当前容器宽度。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log 代码 html it la ha sp class style log 代码 html it la ha sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢