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