你的位置:首页 > ASP.net教程

[ASP.net教程]EasyUI系列学习(二)


一、创建拖动组件

0.Draggable组件不依赖于其他组件

1.使用标签创建

<div class="easyui-draggable" id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div>

2.使用js创建

<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">拖动组件</div><script>  $(function () {    $("#box").draggable();  });</script>

二、属性

1.revert:如果设置为true,在拖动停止时元素将返回起始位置

<script>  $(function () {    $("#box").draggable({      revert:true    });  });</script>

2.cursor:拖动时的CSS指针样式

$(function () {  $("#box").draggable({    cursor: "text"  });});

3.handle:开始拖动的句柄

<div id="box" style="width: 200px; height: 100px; left: 100px; background: orange">  <div id="pox">拖动组件</div></div><script>  $(function () {    $("#box").draggable({      handle: "#pox"    });  });</script>

4.disabled:如果设置为true,则停止拖动

<script>  $(function () {    $("#box").draggable({      disabled: true    });  });</script>

5.edge:可以在其中拖动的容器的宽度

<script>  $(function () {    $("#box").draggable({      edge: 20    });  });</script>

6.axis:定义元素移动的轴向,可用值有:'v'或'h',当没有设置或设置为null时可同时在水平和垂直方向上拖动

<script>  $(function () {    $("#box").draggable({      axis: 'h'    });  });</script>

7.proxy:在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素

<script>  $(function () {    $("#box").draggable({      proxy: "clone",      deltaX: 50,      deltaY: 50    });  });</script>

三、事件

1.onBeforeDrag:在拖动之前触发,返回false将取消拖动

<script>  $(function () {    $("#box").draggable({      onBeforeDrag: function (e) {        alert("拖动前触发");        //return false;      }    });  });</script>

2.onStartDrag:在目标对象开始被拖动时触发

<script>  $(function () {    $("#box").draggable({      onStartDrag: function (e) {        alert("拖动开始触发");      }    });  });</script>

3.onDrag:在拖动过程中触发,当不能再拖动时返回false

<script>  $(function () {    $("#box").draggable({      onDrag: function () {        alert("拖动过程触发");      }    });  });</script>

4.onStopDrag:在拖动停止时触发

<script>  $(function () {    $("#box").draggable({      onStopDrag: function () {        alert("拖动结束触发");      }    });  });</script>

四、方法

1.disable:禁止拖动

<script>  $(function () {    $("#box").draggable({    });    $("#box").draggable("disable");  });</script>

2.enable:允许拖动

<script>  $(function () {    $("#box").draggable({    });    $("#box").draggable("enable");  });</script>

3.options:返回属性对象

<script>  $(function () {    $("#box").draggable({    });    console.log($("#box").draggable("options"));  });</script>

4.proxy:如果代理属性被设置则返回该拖动代理元素

<script>  $(function () {    $("#box").draggable({      proxy: function (source) {        //source是id为box的div对象        //console.log(source);        var p = $("<div style='width:400px;height:200px;border:1px dashed red'></div>");        //p.appendTo("body");        p.html($(source).html()).appendTo("body");        return p;      }    });  });</script>

五、重写默认值对象

<script>  $(function () {    //所有该组件,都是文本指针    $.fn.draggable.defaults.cursor = "text";    $("#box").draggable({    });  });</script>