EasyUI系列学习(三)-Draggable(拖动)

2018-06-23 23:01:38来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、创建拖动组件

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:可以在其中拖动的容器的宽度(理解成padding<=20时无法拖)

<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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Linq学习(五)-多表连接

下一篇:Nancy之给我们的网站添加自定义图标