• Draggable(拖动框)


    一、class加载方式

        <div id="box" class="easyui-draggable" style="400px;height:200px;background:red">

              内容部分
        </div>

    二、js加载

       $("#box").draggable({})

    三、关于draggable的属性、事件、方法

       $("#box").draggable({ 

    //属性

         revert:true, //设置为 true,则拖动停止时返回起始位置,默认为false
         cursor : 'move',//拖动时的 CSS 指针样式 move/pointer/text/wait等 默认为move
         handle:'#pos' //开始拖动的句柄 值为选择器 默认为null
        disabled : true, //设为true停止拖动 默认为false
        edge : 50, //可以在其中拖动的容器的宽度 值为number 默认为0
        axis:"v" //设置拖动为垂直'v',还是水平'h' 默认为null
       deltaX : 10, // 被拖动的元素对应于当前光标位置 x 值为number 默认为null
       deltaY : 10, // 被拖动的元素对应于当前光标位置 y 值为number 默认为null
       proxy: 'clone',
       proxy: function(source){}, //当使用'clone',则克隆一个替代元素拖动。 如果指定一个函数,则自定义替代元素。

    //事件
      onBeforeDrag : function (e) { alert('拖动之前触发!'); //return false; }, 返回 false 将取消拖动
      onStartDrag : function (e) { alert('拖动时触发!'); },
      onDrag : function (e) { alert('拖动过程中触发!'); }, 不能拖动时返回 false
      onStopDrag : function (e) { alert('在拖动停止时触发!'),

      onStartDrag : function (e) { console.log($('#box').draggable('proxy')); }, //返回代理元素需和 proxy: 'clone'一起使用,可输出其代理元素

    });
    //方法
      console.log($('#box').draggable('options')); //返回属性对象
      $('#box').draggable('disable'); //禁止拖动
      $('#box').draggable('enable'); //允许拖放

      $('#box').draggable('proxy');//返回代理元素

  • 相关阅读:
    spring:事务的5大隔离级别,7大传播行为
    spring事务管理(xml配置)与spring自带连接数据库JdbcTemplate
    spring顾问包装通知
    Spring常见的两种增强方式
    Spring-增强方式注解实现方式
    Spring----aop(面向切面编程)
    Spring_IOC
    服务器项目代码在本地打断点调试
    FreeMarker标签出错问题
    Eclipse启动项目没加载到webapps目录下
  • 原文地址:https://www.cnblogs.com/Alaic2052243080/p/11427215.html
Copyright © 2020-2023  润新知