码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-17 15:36:04      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/chenliang-zibo/p/4434777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!