示例

基本形式

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

移动自身

如果DOM元素的CSS属性position默认为static，则在拖拽时会自动设置为relative。

<jr-draggable proxy="self"><div class="u-color u-color-info">自身</div></jr-draggable>

设置代理

<jr-draggable>
    <div class="u-color u-color-primary">拖我</div>
    <jr-draggable-proxy>
        <div class="u-color u-color-warning">代理</div>
    </jr-draggable-proxy>
</jr-draggable>

事件

请打开浏览器的控制台查看结果。

<jr-draggable
    on-dragstart={console.log('on-dragstart:', '$event:', $event)}
    on-dragend={console.log('on-dragend:', '$event:', $event)}>
    <div class="u-color u-color-primary">拖我</div>
</jr-draggable>

可拖动的弹窗

<jr-button class="u-btn u-btn-primary" on-click={visible = true}>显示弹窗</jr-button>
<div class="m-modal" r-hide={!visible}>
    <div class="modal_dialog" ref="modalDialog">
        <jr-draggable proxy={this.$refs.modalDialog}>
        <div class="modal_hd">
            <a class="modal_close" on-click={visible = false}><i class="u-icon u-icon-close"></i></a>
            <h3 class="modal_title">提示</h3>
        </div>
        </jr-draggable>
        <div class="modal_bd">请拖动标题栏</div>
        <div class="modal_ft">
            <jr-button class="u-btn u-btn-primary" on-click={visible = false}>确定</jr-button>
        </div>
    </div>
</div>
let component = new JRUI.Component({
    template,
    data: {visible: false}
});

拖拽约束

<div class="g-row">
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable0"><div class="u-ball"></div></jr-draggable>
            水平约束
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable1"><div class="u-ball"></div></jr-draggable>
            垂直约束
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable2"><div class="u-ball"></div></jr-draggable>
            45度约束
        </div>
    </div>
</div>
<div class="g-row">
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable3"><div class="u-ball"></div></jr-draggable>
            范围约束
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable4"><div class="u-ball"></div></jr-draggable>
            网格约束
        </div>
    </div>
    <div class="g-col g-col-4">
        <div class="m-well">
            <jr-draggable proxy="self" ref="draggable5"><div class="u-ball" style="left: 160px; top: 120px;"></div></jr-draggable>
            圆约束
        </div>
    </div>
</div>
let component = new JRUI.Component({
    template,
    init() {
        let free = this.$refs.draggable0.restrict;
        this.$refs.draggable0.restrict = (params) =>
            ({left: params.startLeft + params.dragX, top: params.startTop});
        this.$refs.draggable1.restrict = (params) =>
            ({left: params.startLeft, top: params.startTop + params.dragY});
        this.$refs.draggable2.restrict = (params) => {
            let min = Math.min(params.dragX, params.dragY);
            return {left: params.startLeft + min, top: params.startTop + min};
        };
        this.$refs.draggable3.restrict = (params) => {
            let next = free(params);
            let min = 80, max = 120;
            next.left = Math.min(Math.max(min, next.left), max);
            next.top = Math.min(Math.max(min, next.top), max);
            return next;
        };
        this.$refs.draggable4.restrict = (params) => {
            let next = free(params);
            let grid = 40;
            next.left = Math.round(next.left/grid)*grid;
            next.top = Math.round(next.top/grid)*grid;
            
            return next;
        };
        this.$refs.draggable5.restrict = (params) => {
            let next = free(params);
            let nextNorm = Math.sqrt(next.left*next.left + next.top*next.top);
            let radius = 20;
            next.left *= radius/nextNorm;
            next.top *= radius/nextNorm;
            
            return next;
        };
    }
});

API

Classes

JRDraggable ⇐ Component

Constants

Component

Draggable 拖出

Functions

config()
init()
cancel() 取消拖拽操作() ⇒ void
init()

Events

“dragstart 拖拽开始时触发”
“drag 正在拖拽时触发”
“dragend 拖拽结束时触发”

JRDraggable ⇐ Component

Kind: global class
Extends: Component

new JRDraggable()

Param Type Default Description
[options.data] Object = 绑定属性
[options.data.proxy] @=> 拖拽代理，即拖拽时移动的元素。默认值为clone，拖拽时拖起自身的一个拷贝；当值为self，拖拽时直接拖起自身。也可以用<jr-draggable-proxy>自定义代理，或直接传入一个元素或函数。''表示不使用拖拽代理。
[options.data.value] var => 拖拽时需要传递的值
[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

Component

Draggable 拖出

Kind: global constant

config()

Kind: global function
Access: protected

init()

Kind: global function
Access: protected

cancel() 取消拖拽操作() ⇒ void

Kind: global function
Access: public

init()

Kind: global function
Access: protected

“dragstart 拖拽开始时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象，为当前draggable
origin object 拖拽源，为当前draggable
source object 拖拽起始元素
proxy object 拖拽代理元素
value var 拖拽时需要传递的值
screenX number 鼠标指针相对于屏幕的水平坐标
screenY number 鼠标指针相对于屏幕的垂直坐标
clientX number 鼠标指针相对于浏览器的水平坐标
clientY number 鼠标指针相对于浏览器的垂直坐标
pageX number 鼠标指针相对于页面的水平坐标
pageY number 鼠标指针相对于页面的垂直坐标
startX number 拖拽开始时鼠标指针的水平坐标
startY number 拖拽开始时鼠标指针的垂直坐标
dragX number 拖拽时鼠标指针相对于起始坐标的水平位移
dragY number 拖拽时鼠标指针相对于起始坐标的垂直位移
startLeft number 拖拽开始时代理元素的left值
startTop number 拖拽开始时代理元素的top值
left number 拖拽时代理元素的left值
top number 拖拽时代理元素的top值
cancel function 取消拖拽操作

“drag 正在拖拽时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象，为当前draggable
origin object 拖拽源，为当前draggable
source object 拖拽起始元素
proxy object 拖拽代理元素
value var 拖拽时需要传递的值
screenX number 鼠标指针相对于屏幕的水平坐标
screenY number 鼠标指针相对于屏幕的垂直坐标
clientX number 鼠标指针相对于浏览器的水平坐标
clientY number 鼠标指针相对于浏览器的垂直坐标
pageX number 鼠标指针相对于页面的水平坐标
pageY number 鼠标指针相对于页面的垂直坐标
startX number 拖拽开始时鼠标指针的水平坐标
startY number 拖拽开始时鼠标指针的垂直坐标
dragX number 拖拽时鼠标指针相对于起始坐标的水平位移
dragY number 拖拽时鼠标指针相对于起始坐标的垂直位移
startLeft number 拖拽开始时代理元素的left值
startTop number 拖拽开始时代理元素的top值
left number 拖拽时代理元素的left值
top number 拖拽时代理元素的top值
cancel function 取消拖拽操作

“dragend 拖拽结束时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象，为当前draggable
origin object 拖拽源，为当前draggable
source object 拖拽起始元素
proxy object 拖拽代理元素
value var 拖拽时需要传递的值
拖入 →