程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 6、easyUI-拖放事件及應用,easyui-拖放事件

6、easyUI-拖放事件及應用,easyui-拖放事件

編輯:關於PHP編程

6、easyUI-拖放事件及應用,easyui-拖放事件


一、EasyUI 基本的拖動和放置

直接代碼看:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>6、easyui 拖放</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function(){
            $("#dd1").draggable({
                cursor:'pointer'//拖動時的CSS指針樣式。
            });
            $("#dd2").draggable({
                proxy:'clone'
            });
            $("#dd3").draggable({
                    proxy:function(source){
                    var p = $('<div class="proxy">proxy</div>');
                    p.appendTo('body');
                    return p;
                }
            });
            $('#dds').draggable({ 
                handle:'#titles' //開始拖動的句柄。
            }); 
        });
    </script>
    
</head>
<body>
    <div id="dd1">class="easyui-draggable" data-options="handle:'#title'"><!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>6-1、easyui 購物車</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <style>
        /*開始 第二步 設置拖動區樣式*/
        .products{
            list-style:none;
            margin-right:700px;
            padding:0px;
            height:100%;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }
        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333;
        }
        .item p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }
        /*結束 第二步 設置拖動區樣式*/
        
        /*開始 第四步 設置放置區樣式*/
        .cart{
            position:fixed;
            right:0;
            top:0;
            min-width:500px;
            height:100%;
            background:#ccc;
            padding:0px 10px;
        }
        h1{
            text-align:center;
            color:#555;
        }
        h2{
            position:absolute;
            font-size:16px;
            left:10px;
            bottom:20px;
            color:#555;
        }
        .total{
            margin:0;
            text-align:right;
            padding-right:20px;
        }
        /*結束 第四步 設置放置區樣式*/
    </style>
    <script>
        var data = {"total":0,"rows":[]};
        var totalCost = 0;
        
        
        $(function(){
            /**開始 第五步 設置放置區中table的屬性及樣式**/
            $('#cartcontent').datagrid({//這段代碼可以直接寫在頁面上   設置table clas="easyUI-datagrid" singleSelect="true" fitColumns="true"
                singleSelect:true,    //表格屬性    如果為true,則只允許選擇一行  不設置可以選擇多行
                //fitColumns:true,//真正的自動展開/收縮列的大小,以適應網格的寬度,防止水平滾動。
                //同列屬性,但是這些列將會被凍結在左側。
                frozenColumns:[[
                    {field:'name',title:'name',width:100}
                ]] ,
                //設置表頭
                columns:[[    
                    {field:'quantity',title:'quantity',width:100,align:'right'},    
                    {field:'price',title:'price',width:150,align:'right'} ,
                    {field:'mark',title:'mark',width:150,align:'right'} ,
                    {field:'mark2',title:'mark2',width:150,align:'right'}   
                ]] ,
                ////調整列的位置,可用的值有:'left','right','both'。在使用'right'的時候用戶可以通過拖動右側邊緣的列標題調整列 默認為right
                resizeHandle:'both',
               // striped:true,//默認是false 顯示斑馬線效果
                rownumbers:true//顯示一個行號默認不顯示。   
            });
            /**結束 第五步 設置放置區中table的屬性及樣式**/
            
            
            
            /**開始 第六步 設置拖動區的效果以及觸發事件**/
            //拖動設置
            $('.item').draggable({
                revert:true,//如果設置為true,在拖動停止時元素將返回起始位置。默認為false  
                proxy:'clone',//在拖動的時候使用的代理元素,當使用'clone'的時候,將使用該元素的一個復制元素來作為替代元素
                
//                事件
                onStartDrag:function(){//在目標對象開始被拖動時觸發。
                    $(this).draggable('options').cursor = 'not-allowed';//設置被拖動時不允許再選中
                    $(this).draggable('proxy').css('z-index',10);//攝者克隆後的屬性
                },
//                事件
                onStopDrag:function(){//在拖動停止時觸發。
                    $(this).draggable('options').cursor='move';//設置鼠標屬性為拖動形狀
                }
            });
            /**結束 第六步 設置拖動區的效果以及觸發事件**/
            
            
            
            /**開始 第七步 設置放置區的效果以及觸發事件**/
            //放置
            $('.cart').droppable({//設置在div的class屬性為cart的區域內都被視為放置區
                //在被拖拽元素到放置區內的時候觸發,source參數表示被拖拽的DOM元素。
                onDragEnter:function(e,source){
                    $(source).draggable('options').cursor='auto';//設置拖動的鼠標樣式
                },
                //在被拖拽元素經過放置區的時候觸發,source參數表示被拖拽的DOM元素
                onDragOver:function(e,source){
                    $('.cart').css("background","#0088CC");//設置放置區背景色
                },
                //在被拖拽元素離開放置區的時候觸發,source參數表示被拖拽的DOM元素。
                onDragLeave:function(e,source){
                    $(source).draggable('options').cursor='not-allowed';//設置拖動的鼠標樣式
                    $('.cart').css("background","#CCC");//設置拖動的離開放置區,放置區的背景色
                },
                //在被拖拽元素放入到放置區的時候觸發,source參數表示被拖拽的DOM元素。
                onDrop:function(e,source){
                    var name = $(source).find('p:eq(0)').html();//獲取商品名稱
                    var price = $(source).find('p:eq(1)').html();//獲取商品價格
                    addProduct(name, parseFloat(price.split('$')[1]));//調用添加商品方法
                    $('.cart').css("background","#CCC");//設置放入到放置區,放置區的背景色
                }
            });
            /**結束 第七步 設置放置區的效果以及觸發事件**/
        });
        
        //最後 添加物品方法函數
        function addProduct(name,price){
            function add(){
                for(var i=0; i<data.total; i++){
                    var row = data.rows[i];
                    if (row.name == name){
                        row.quantity += 1;
                        return;
                    }
                }
                data.total += 1;
                data.rows.push({
                    name:name,
                    quantity:1,
                    price:price
                });
            }
            add();
            totalCost += price;
            $('#cartcontent').datagrid('loadData', data);
            $('div.cart .total').html('Total: $'+totalCost);
        }
    </script>
</head>
<body>class="products">
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt1.gif"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt2.gif"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt3.gif"/>
                <div>
                    <p>Elephant</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt4.gif"/>
                <div>
                    <p>Stamps</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt5.gif"/>
                <div>
                    <p>Monogram</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="../../../img/shirt6.gif"/>
                <div>
                    <p>Rolling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
    </ul>
    <!--結束 第一步    拖動區設置-->
    
    <!--開始 第三步 設置放置區table及區域-->
    <div class="cart">
        <h1>Shopping Cart</h1>
        <div>class="total">Total: $0</p>
        <h2>Drop here to add to cart</h2>
    </div>
    <!--結束 第三步 設置放置區table及區域-->
</body>
</html>

 

三、課程表

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>6-2、easyui 課程表</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <style>
        .dragraera{
            width: 120px;
            float: left;
        }
        .dragraera table{
            background:#E0ECFF;
        }
        .dragraera td{
            background:#eee;
        }
        .item{
            text-align:center;
            border:1px solid #499B33;
            background:#fafafa;
            width:100px;
        }
        .right{
            float:right;
            width:600px;
        }
        .right table{
            background:#E0ECFF;
            width:100%;
        }
        .right td{
            background:#fafafa;
            text-align:center;
            padding:2px;
        }
        .right td{
            background:#E0ECFF;
        }
        .right td.drop{
            background:#fafafa;
            width:100px;
        }
        .right td.over{
            background:#FBEC88;
        }
        .assigned{
            border:1px solid #BC2A4D;
        }
    </style>
    <script>
        $(function(){
            $(".dragraera .item").draggable({
                revert:true,
                proxy:'clone'
            });
            
            $(".right .drop").droppable({
                onDragEnter:function(){
                    $(this).addClass('over');
                },
                onDragLeave:function(){
                    $(this).removeClass('over');
                },
                onDrop:function(e,source){
                    $(this).removeClass('over');
                    if ($(source).hasClass('assigned')){
                        $(this).append(source);
                    } else {
                        var c = $(source).clone().addClass('assigned');
                        $(this).empty().append(c);
                        c.draggable({
                            revert:true
                        });
                    }
                }
            });
            
            
        });
    </script>
</head>
<body>class="dragraera">
        <table>
            <tr><td><div class="item">語文</div></td></tr>
            <tr><td><div class="item">數學</div></td></tr>
            <tr><td><div class="item">英語</div></td></tr>
            <tr><td><div class="item">物理</div></td></tr>
            <tr><td><div class="item">化學</div></td></tr>
            <tr><td><div class="item">生物</div></td></tr>
            <tr><td><div class="item">政治</div></td></tr>
            <tr><td><div class="item">歷史</div></td></tr>
            <tr><td><div class="item">地理</div></td></tr>
        </table>
    </div>
    <div class="right">
        <table>
            <tr>
                <td class="blank"></td>
                <td class="title">Monday</td>
                <td class="title">Tuesday</td>
                <td class="title">Wednesday</td>
                <td class="title">Thursday</td>
                <td class="title">Friday</td>
            </tr>
            <tr>
                <td class="time">08:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">09:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">10:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">11:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">12:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">13:00</td>
                <td class="lunch" colspan="5">Lunch</td>
            </tr>
            <tr>
                <td class="time">14:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">15:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">16:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved