EasyUI的拖动效果

最新推荐文章于 2021-07-09 08:47:04 发布

转载最新推荐文章于 2021-07-09 08:47:04 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xdtg/p/11462945.html

文章标签：

#javascript #ViewUI

本文详细介绍如何在EasyUI中实现元素的拖动效果，包括基本的拖动初始化、通过标题拖动、拖动代理、限制拖动范围等实用技巧。所有代码已测试，可直接应用。

在easyUI中拖动效果非常的简单。

想在代码中使用easyUI必须引用以下几个文件

注意的一点是引入easyui.min.js文件的时候必须是在jquery.js后面，不然没有效果。

下面直接上代码：

目录结构：

01－draggable.jsp

<%--通过标签初始化可拖动
    <div class="easyui-draggable" style="width: 300px;height: 300px;border: 1px solid #00bbee">
        可拖动
    </div>
--%>
<%--通过js初始化可拖动
<div id="draggable" style="width: 300px;height: 300px;border: 1px solid #00bbee">
    可拖动
</div>
<script type="text/javascript">
    $(function () {
        $("#draggable").draggable();
    })
</script>--%>

<%--在标题面拖动一
<div id="draggable" class="easyui-draggable" style="width: 300px;height: 300px;border: 1px solid #00bbee" data-options="handle:'#title'">
    <div id="title">拖动标题</div>
</div>
--%>
<div id="draggable" style="width: 300px;height: 300px;border: 1px solid #00bbee" >
    <div id="title" style="background-color: #00ee00">拖动标题</div>
    <a href="01-1proxy.jsp">拖动代理</a>
    <a href="01-2constrain.jsp">限制拖动</a>
</div>
<script type="text/javascript">
    $(function () {
        $("#draggable").draggable({
            handle:"#title"
        });
    })
</script>

01-1proxy.jsp

<div id="draggable" style="width: 300px;height: 300px;border: 1px solid #00bbee">
    可拖动
</div>
<script type="text/javascript">
    $(function () {
        $("#draggable").draggable({
            //proxy: "clone"//拖动的时候没有直接过动，而是再松鼠标的时候才过去的
           /* proxy:function (source) {
                var p = $("<div style='width:20px;height:20px;background-color:#00ee00'></div>");
                p.appendTo("body");
                return p;
            }*///在拖动的时候有一个小标记先进行定位，然后再整体的过来
        })
    })
</script>

01-2constrain.jsp

<div id="01-2constrain.jspdraggable1" style="width: 300px;height: 300px;border: 1px solid #00bbee">
    <div id="draggable2" style="width: 30px;height: 30px;border: 1px solid #0000FF"></div>
</div>
<script type="text/javascript">
    $(function () {
        $("#draggable2").draggable({
            onDrag:function (e) {//拖动的方法
                var d = e.data; //拿到要拖动的方法
                if (d.left < d.parent.offsetLeft) {//如果拖动到父容器最左边
                    d.left = d.parent.offsetLeft; //限制一下不让再拖动了
                }
                if (d.top < d.parent.offsetTop) { //和上面的同理，不让再往上面拖动了
                    d.top = d.parent.offsetTop;
                }
                if (d.left + $(d.target).outerWidth() > $(d.parent).outerWidth() + d.parent.offsetLeft) {
                    //这个容器的左边加上它本身的宽度，大于它的父容器的本身的宽度加上它到左边的宽度
                    d.left = $(d.parent).outerWidth()- $(d.target).outerWidth() + d.parent.offsetLeft;
                    //这个容器的父容器的本身的宽度一去这个小容器的宽度最后再一次加上这父这容器到左边的跟离
                }
                if (d.top + $(d.target).outerHeight() > $(d.parent).outerHeight() + d.parent.offsetTop) {
                    //和上面限制右边拖动的原理一样，
                    d.top = $(d.parent).outerHeight()- $(d.target).outerHeight() + d.parent.offsetTop;
                }
            }
        })
    })
</script>