示例

基本形式

<jr-movable><div class="u-color u-color-primary">拖我</div></jr-movable>

轴向约束

<jr-movable axis="x"><div class="u-color u-color-info">水平</div></jr-movable>
<jr-movable axis="y"><div class="u-color u-color-warning">垂直</div></jr-movable>

网格约束

<jr-movable grid={ { x: 40, y: 30 } }><div class="u-color u-color-success">网格</div></jr-movable>

范围约束

<div class="m-well">
    <jr-movable range={ { left: 0, top: 0, right: 200, bottom: 200 } }><div class="u-color u-color-info">object</div></jr-movable>
</div>
<div class="m-well">
    <jr-movable range="offsetParent"><div class="u-color u-color-info" style="position: absolute;">offsetParent</div></jr-movable>
</div>

范围约束模式

<div class="m-well">
    <jr-movable range="offsetParent" rangeMode="inside"><div class="u-color u-color-info" style="position: absolute;">inside</div></jr-movable>
</div>
<div class="m-well">
    <jr-movable range="offsetParent" rangeMode="center"><div class="u-color u-color-info" style="position: absolute; margin-left: -68px; margin-top: -68px;">center</div></jr-movable>
</div>

Slider

这是Slider的一个简单示例。 

<div class="g-row">
    <div class="g-col g-col-6">
        <div class="u-slider">
            <div class="slider_bar" style="width: {percent}%"></div>
            <jr-movable axis="y" range="offsetParent" rangeMode="center"
                on-drag={this._onDrag($event)}>
                <div class="slider_btn" style="left: {percent}%"></div>
            </jr-movable>
        </div>
    </div>
</div>
let component = new JRUI.Component({
    template: template,
    data: {percent: 20},
    _onDrag($event) {
        this.data.percent = $event.left/$event.range.right*100;
    }
});

Pallette

<div class="m-pallette">
    <div class="pallette_SV">
        <jr-movable range="offsetParent" rangeMode="center">
            <div class="pallette_SV_btn" style="left: 100px; top: 100px;"></div>
        </jr-movable>
    </div>
</div>

Resizable

<div class="m-resizable" style="width: {width}px; height: {height}px;">
    <div class="m-panel m-panel-info">
        <div class="panel_bd">Content</div>
    </div>
    <jr-movable range={ { left: 100, top: 100, right: 300, bottom: 200 } } rangeMode="center" on-drag={this._onDrag($event)}>
        <div class="resizable_handle"></div>
    </jr-movable>
</div>
let component = new JRUI.Component({
    template: template,
    data: {
        width: 240,
        height: 120
    },
    _onDrag($event) {
        this.data.width = $event.left;
        this.data.height = $event.top;
    }
});

API

Classes

JRMovable ⇐ JRDraggable

Constants

dom

JRMovable 移动

Functions

config()
restrict()

JRMovable ⇐ JRDraggable

Kind: global class
Extends: JRDraggable

new JRMovable()

Param Type Default Description
[options.data] Object = 绑定属性
[options.data.proxy] @=> 拖拽代理，即拖拽时移动的元素。默认值为clone，表示拖拽时会拖起自身的一个拷贝；当值为self，拖拽时直接拖起自身。也可以用<jr-draggable-proxy>自定义代理，或直接传入一个元素或函数。''表示不使用拖拽代理。
[options.data.axis] string "'both'" => 拖拽代理移动时限制的轴向，all表示可以在任意方向上移动，x表示限制在水平方向上移动，y表示限制在垂直方向上移动。
[options.data.grid] Object {x:0,y:0} => 拖拽代理移动时限制的网格。值为一个{x,y}格式的对象，表示水平方向和垂直方向网格的大小。
[options.data.range] string | object | function @=> 拖拽范围。值可以为一个{left,top,right,bottom}格式的对象，表示代理元素移动的上下左右边界，也可以传一个函数。当值为offsetParent，代理元素限制在offsetParent中移动，仅适用于position为absolute的情况；当值为parent；当值为window时，拖拽时代理元素限制在window中移动，仅适用于position为fixed的情况。
[options.data.rangeMode] string "inside" => 拖拽范围模式，默认为inside，表示在拖拽范围内侧移动，center表示在拖拽范围边缘及内侧移动。
[options.data.disabled] boolean false => 是否禁用
[options.data.class] string "'z-draggable'" => 可拖拽时（即disabled=false）给该元素附加此class
[options.data.sourceClass] string "'z-dragSource'" => 拖拽时给起始元素附加此class
[options.data.proxyClass] string "'z-dragProxy'" => 拖拽时给代理元素附加此class

dom

JRMovable 移动

Kind: global constant

config()

Kind: global function
Access: protected

restrict()

Kind: global function
Access: protected

← 拖入 滑块 →