微信公众号：​​程序yuan​​
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

可拖动组件Draggable

 

【EasyUI篇】可拖动组件——Draggable_html

【EasyUI篇】可拖动组件——Draggable_html_02

【EasyUI篇】可拖动组件——Draggable_css_03

 

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Combobox下拉框</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Draggable.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body>

    <%--class加载方式--%>
    <%--class="easyui-draggable"--%>
    <div id="box" style="width:400px; height: 200px; background: orange;">
        <div id="content" style="width: 50px;height: 50px; background:red;">内容部分</div>
    </div>

</body>
</html>

JS文件

$(function () {

    // 使用$.fn.draggable.defaults 重写默认值对象。(改变拖动组件的默认值)
    // $.fn.draggable.defaults.cursor = 'text';

    //使用js加载方式
    $("#box").draggable({
//------------------- 属性 ---------------------------
        //设置拖动释放后是否回到原来位置
        // revert:true,
        //设置拖动时鼠标的样式 move(default)/text
        // cursor:"move",
        //设置可执行拖动的区域
        // handle:"#content",
        //设置为不可拖动
        // disabled:true,
        //设置可以拖动的区域离边框的距离
        // edge:50,
        //设置是否只可以水平拖动(h)或是只可以垂直拖动（v）
        // axis:"h",
        //  deltaX deltaY 需与proxy 组合使用
        proxy:"clone",
        //被复制后拖动的元素的左上角距离鼠标光标的位置
        // deltaX:10,
        // deltaY:10,
        /*proxy: function(source){
            console.log(source);
            var p = $('<div style="border:1px solid #ccc;width:400px;height:200px;"></div>');
            p.html($(source).html()).appendTo('body');
            return p;
        },*/
//----------------- 事件 -----------------------
        /*onBeforeDrag : function (e) {
        //返回 false 将取消拖动
            // console.log(e);
            alert("拖动前触发");
        },*/
        onStartDrag : function (e) {
            // alert("拖动开始触发");
            // 如果代理属性被设置则返回该拖动代理元素
            //代理对象是在拖动时才会生成的（代理元素就是其本身）
            console.log($("#box").draggable("proxy"));
        },
        /*onDrag : function (e) {
            alert("拖动过程中触发");
        },*/
        /*onEndDrag : function (e) {
            alert("拖动停止时触发");
        }*/
    });

//------------------- 方法 -------------------
    //返回属性对象
    // console.log($("#box").draggable('options'));
    //设置为不可拖动
    // $("#box").draggable('disable');
    //设置为可以拖动
    // $("#box").draggable('enable');

});

注意：代理对象是在拖动时才会生成的

 

 

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】可拖动组件——Draggable_javascript_04