API Docs for: 0.2
Show:

JC.Drag Class

响应式 Drag and Drop 功能
对 [ div | button ].js_compDrag 生效

require: JC.common , JC.BaseMVC

JC Project Site | API docs | demo link

通用 HTML attribute

dragTarget = selector, default = self
要拖动的 selector, 可以通过该属性指定拖动的父节点
dragIn = selector, default = window
可拖动的范围
disableDrag = bool, default = false
是否禁止拖动, 会执行实例初始化
ignoreDrog = bool, default = false
是否忽略拖动, 不会执行实例初始化
dragInitedCb = function, window 变量域
实例初始化后调用的回调
function dragInitedCb( _selector, _dragTarget ){
   var _ins = this;
   JC.log( 'dragInitedCb', new Date().getTime() );
}
dragBeforeCb = function, window 变量域
拖动之前调用的回调, 如果返回 false, 将停止拖动操作
function dragBeforeCb( _dragTarget, _selector ){
   var _ins = this;
   JC.log( 'dragBeforeCb', new Date().getTime() );
   //return false;
}
dragAfterCb = function, window 变量域
拖动完成之后的回调
function dragAfterCb( _dragTarget, _selector ){
   var _ins = this;
   JC.log( 'dragAfterCb', new Date().getTime() );
}
dragBeginCb = function, window 变量域
拖动开始时的回调
function dragBeginCb( _selector, _dragTarget, _movingSelector ){
   var _ins = this;
   JC.log( 'dragBeginCb', new Date().getTime() );
}
dragMovingCb = function, window 变量域
拖动移动时的回
function dragMovingCb( _selector, _dragTarget, _movingSelector, _x, _y, _evt ){
   var _ins = this;
   JC.log( 'dragMovingCb', new Date().getTime() );
}
dragDoneCb = function, window 变量域
拖动完成时的回调
function dragDoneCb( _selector, _dragTarget ){
   var _ins = this;
   JC.log( 'dragDoneCb', new Date().getTime() );
}

drop HTML attribute

dropFor = selector
指定可拖放的 selector
dropSwap = bool, default = false
是否交换拖曳的位置
为真, 交换 selector 的位置
不为真, 将 append 到目标 selector
disableDrop = bool, default = false
是否禁止 拖放功能, 这个属性应当写在 dropFor 的 selector 里
dropDoneCb = function, window 变量域
拖放完成时的回调, 如果返回 false, 将停止拖放操
function dropDoneCb( _dragTarget, _dropTarget ){
   var _initSelector = this;
   JC.log( 'dropDoneCb', new Date().getTime() );
   //return false;
}
dropDoneAfterCb = function, window 变量域
拖放完成后的回调
function dropDoneAfterCb( _dragTarget, _dropTarget ){
   var _initSelector = this;
   JC.log( 'dropDoneAfterCb', new Date().getTime() );
}

Constructor

JC.Drag

(
  • _selector
)

Parameters:

Example:

   <h2>拖动示例</h2>
   <div class="JCDrag dragStyle1 js_compDrag" dragBeginCb="dragBeginCb">
       normal drag 
       , dragBeginCb="dragBeginCb"
   </div>
   <h2>拖放示例</h2>
   <table>
       <tr>
           <td>
               <div class="js_compDrag" 
                   dropFor="(table div.js_compDrag" 
                   dropSwap="true" 
                   dropDoneCb="dropDoneCbAllow"
                   >
                   dropDoneCb="dropDoneCbAllow"
               </div>
           </td>
           <td>
               <div class="js_compDrag" 
                   dropFor="(table div.js_compDrag" 
                   dropSwap="true" 
                   dropDoneCb="dropDoneCbBan"
                   > 
                   dropDoneCb="dropDoneCbBan"
               </div>
           </td>
       </tr>
   </table>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

_updatePosition

() protected

更新 dragMovingTarget 的位置

cleanDragData

() static

清除拖动的相关数据

defaultMouseMove

(
  • _evt
)
static

拖动时, 默认的 mousemove 函数

Parameters:

  • _evt Evt

defaultMouseUp

(
  • _evt
)
static

拖动时, 默认的 mouseup 函数

Parameters:

  • _evt Evt

defaultScroll

(
  • _evt
)
static

拖动时, 默认的 scroll 函数

Parameters:

  • _evt Evt

draggingItem

(
  • _setter
)
Selector | Null static

设置当前的拖动 selector

Parameters:

  • _setter Selector | Null

Returns:

Selector | Null:

dragIn

() Selector | Window

获取可拖动范围的 [ 节点 | window ]

Returns:

Selector | Window:

dragInfo

(
  • _ins
  • _evt
)
Json | Null static

设置/获取 拖动时所需的数据

Parameters:

  • _ins DragInstance
  • _evt Event

Returns:

Json | Null:

dragMovingTarget

()

获取拖动时移动的节点, drag 使用 dragTarget, drop clone dragTarget

Returns:

selector

dragTarget

()

获取拖动的源节点

Returns:

selector

init

(
  • _selector
)
Array of DragInstance static

初始化可识别的 Drag 实例

Parameters:

  • _selector Selector

Returns:

Array of DragInstance:

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

Events

JCDragAfter

拖动完成之后触发的事件

JCDragBefore

拖动开始前触发的事件

JCDragBegin

拖动开始时触发的事件

JCDragDone

拖动完成时触发的事件

JCDraggingMoving

拖动移动时触发的事件

JCDragInited

实例初始化后触发的事件

JCDropDone

拖放完成时触发的事件

JCDropDoneAfter

拖放完成后触发的事件

JCTriggerDrag

手动触发拖动事件