EasyUI-draggable

最新推荐文章于 2024-04-19 17:11:53 发布

小星向上

最新推荐文章于 2024-04-19 17:11:53 发布

阅读量456

点赞数

分类专栏： easy ui 文章标签： easyui draggable

easy ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

EasyUI-draggable

　　draggable用来在界面上创建一个可以拖动的元素，既然是可以拖动的元素，那么它在拖动过程中会有下面的几个事件：onBeforeDrag、onStartDrag、onDrag、onStopDrag。

　　创建一个拖动元素一般需要两个部分：一个包装层，用来保存在拖动过程的内容；另外一个，是拖动的对象，相当于是水桶把。下面的示例中，拖动#title来改变#db的位置。

<body>
    <div id="db" style="width: 100px;">
        <p id="title" style="background: #ccc;">
            draggable</p>
        <p id="P1">
            1111111111</p>
        <p id="P2">
            2222222222</p>
        <p id="P3">
            3333333333</p>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#db').draggable({
                handle: '#title'
            });
        });
    </script>
</body>

　　另外，也可以不指定handle属性，那么整个#db都是拖动的。

基本属性

1.handle

　　拖动元素中，用于拖动的部分。

2.axis

　　控制拖动方向，如果不指定，那么可以任意拖动。通过， 'v' 或 'h'，这两个值，来指定水平或垂直方向上的拖动。

3.cursor

　　用来指定拖动时，光标的样式，默认是：move

4.revert

　　如果这个属性值是ture，那么拖动松开后，拖动元素会回到起点。

5.proxy

　　通过赋值“clone”，拖动时，会创建一个副本。

拖拽限制

<body>
    <div style="position: relative; overflow: hidden; border: 1px solid #ccc; width: 500px; height: 300px">
        <div id="db" style="width: 100px; height: 100px; background: #fafafa; border: 1px solid #ccc;">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#db').draggable({
                onDrag: function (e) {
                    var d = e.data;
                    if (d.left < 0) {
                        d.left = 0;
                    }
                    if (d.top < 0) {
                        d.top = 0;
                    }
                    if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
                        d.left = $(d.parent).width() - $(d.target).outerWidth();
                    }
                    if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
                        d.top = $(d.parent).height() - $(d.target).outerHeight();
                    }
                }
            });
        });
    </script>
</body>

通过在拖拽事件中获取db和外部层，然后限制top和left。下面在调试中，输出e.data的值。

学校课程表

下面代码运行有个bug，有时拖动结束了，这个元素失去了再次拖动的能力。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>EasyUI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
    <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <style type="text/css">
        .left{width: 120px;float: left;}
        .left table{background: #E0ECFF;}
        .left td{background: #eee;}
        
        .right{float: right;width: 570px;}
        .right table{width: 100%;}
        .right td{background: #E0ECFF;color: #444;text-align: center;padding: 2px;width: 100px;}
        .right td.drop{background: #fafafa;width: 100px;}
        .right td.over{background: #FBEC88;width: 100px;}
        
        .item{text-align: center;border: 1px solid #499B33;background: #fafafa;color: #444;width: 100px;}
        .assigned{border: 1px solid #BC2A4D;}
    </style>
</head>
<body>
    <div style="width: 800px;">
        <div class="left">
            <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>
            </table>
        </div>
        <div class="right">
            <table>
                <tr>
                    <td></td>
                    <td>星期一</td>
                    <td>星期二</td>
                    <td>星期三</td>
                    <td>星期四</td>
                    <td>星期五</td>
                </tr>
                <tr>
                    <td>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>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>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>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>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>13:00
                    </td>
                    <td colspan="5">午餐时间
                    </td>
                </tr>
                <tr>
                    <td>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>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>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>
    
    <script type="text/javascript">
        $(function () {
            $('.left .item').draggable({
                revert: true,
                proxy: 'clone'
            });
            //可拽入容器
            $('.right td.drop').droppable({
                onDragEnter: function () {
                    $(this).addClass('over');
                },
                onDragLeave: function () {
                    $(this).removeClass('over');
                },
                onDrop: function (e, source) {
                    $(this).removeClass('over');
                    if ($(source).hasClass('assigned')) {
                        //如果有红色的边框，表示是已经在课表中的课程
                        $(this).empty().append(source);
                    } else {
                        //没有红色边框，是从左侧源中拖出的，要创建一个副本
                        var c = $(source).clone().addClass('assigned');
                        $(this).empty().append(c);
                        //这个副本也是可以拖动的
                        c.draggable({
                            revert: true,
                            onStopDrag: function (e) {
                                //停止拖动的时候，如果在表格之外，则删除这个对象
                                var d = e.data;
                                var thisF = d.left;
                                var thisT = d.top;
                                var tableF = $(".right table").offset().left;
                                var tableW = $(".right table").width();
                                var tableT = $(".right table").offset().top;
                                var tableH = $(".right table").height();

                                if (thisF < tableF || thisF > tableF + tableW || thisT < tableT || thisT > tableT + tableH) {
                                    $(this).remove();
                                }
                            }
                        });
                    }
                }
            });
        });  
    </script>
</body>
</html>

写的不错的文章,跟大家一起分享,原文链接:http://www.jeasyui.net/demo/523.html

小星向上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI-draggable

EasyUI-draggable　　draggable用来在界面上创建一个可以拖动的元素，既然是可以拖动的元素，那么它在拖动过程中会有下面的几个事件：onBeforeDrag、onStartDrag、onDrag、onStopDrag。　　创建一个拖动元素一般需要两个部分：一个包装层，用来保存在拖动过程的内容；另外一个，是拖动的对象，相当于是水桶把。下面的示例中，拖动#title来改变
复制链接

扫一扫