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();
    }
    是使拖动后元素自适应当前容器宽度。
  • 相关阅读:
    Delphi中Chrome Chromium、Cef3学习笔记(五)
    java ->IO流_File类
    java ->递归
    java-> 分包分层
    java ->JDBC
    java -> 异常类与自定义异常
    java ->斗地主洗牌
    java -> map接口
    java ->Set接口
    java -> List接口
  • 原文地址:https://www.cnblogs.com/chenliang-zibo/p/4434777.html
Copyright © 2011-2022 走看看