zoukankan      html  css  js  c++  java
  • 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 { 40%; float: left;}
    .work_plat_column_right { 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();
    }
    是使拖动后元素自适应当前容器宽度。
  • 相关阅读:
    函数嵌套
    函数对象
    可变长参数
    函数的参数
    函数的调用
    函数的返回值
    定义函数的三种形式
    函数的定义
    SQLAlchemy
    Flask总结完整版
  • 原文地址:https://www.cnblogs.com/chenliang-zibo/p/4434777.html
Copyright © 2011-2022 走看看