API Docs for: 0.2
Show:

JC.DragSelect Class

DOM标签拖动选择

require: JC.BaseMVC

JC Project Site | API docs | demo link

页面只要引用本脚本, 默认会处理 div class="js_compDragSelect"

可用的 HTML attribute

cdsConfig = script selector
拖动内容的配置 <script type="text/template" class="js_cdsConfig">
   {
       "items": {                                      //响应选择动作的选择器列表
           "td.js_pos_canSelect": {                        //响应选择动作的选择器
               "addClass": "js_pos_selected"               //选取到的内容 添加的 class
               , "removeClass": "js_pos_canSelect"         //选取到的内容 清除的 class
               , "callback":                               //选中内容后的回调
                   function( _items, _type, _ins ){
                       var _selector = this;
                       JC.log( 'callback, td.js_pos_canSelect:', _type, _items.length );
                   }
           }
           , "td.js_pos_selected": {
               "addClass": "js_pos_canSelect"
               , "removeClass": "js_pos_selected"
               , "callback": 
                   function( _items, _type, _ins ){
                       var _selector = this;
                       JC.log( 'callback, td.js_pos_selected:', _type, _items.length );
                   }
           }
       }
       , "realtimeClass": "js_cdsRealtimeEffect"   //实时显示选取内容的 CSS 样式名
       , "callback":                         //选中内容的全局回调
           function( _items, _type, _ins ){
               var _selector = this;
               JC.log( 'js_compDragSelect callback', _items.length, JC.f.ts() );
           }
   }
</script>
cdsRealtimeEffect = bool, default = false
是否实时显示选中内容的状态
cdsRealtimeClass = CSS class name
显示选中内容的 CSS 样式名
cdsCallback = function
选中内容的全局回调
function cdsCallback( _items, _type, _ins ){
   var _selector = this;
   JC.log( 'js_compDragSelect callback', _items.length, JC.f.ts() );
}
cdsItemFilter = function
选取内容时的过滤函数, 返回 false 将忽略 _item
function cdsItemFilter( _item, _type, _itemData, _configData ){
   var _selector = this
       , _r = true
       //, _minDate = JC.f.pureDate( JC.f.dateDetect( 'now,1d' ) )
       //, _itemDate = JC.f.parseISODate( _item.data( 'date' ) )
       ;
   //_itemDate.getTime() < _minDate.getTime() && ( _r = false );
   return _r;
}
cdsRectMinWidth = int, default = 20
响应选取时,最小拖动宽度
cdsRectMinHeight= int, default = 20
响应选取时,最小拖动高度
cdsEnableTextSelectable = bool, default = false
选取内容式,是否启用文本选取

Constructor

JC.DragSelect

(
  • _selector
)

Parameters:

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

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

_initHanlderEvent

() private

内部事件初始化方法

DEFAULT_MOUSEMOVE

() static

默认 mousemove 事件

DEFAULT_MOUSEUP

() static

默认 mouseup 事件

DEFAULT_SELECT_EVENT

() static

默认 selectstart 事件

DRAG_DATA

() static

获取当前拖动的相关数据

Returns:

object

init

(
  • _selector
)
Array of DragSelectInstance static

初始化可识别的 DragSelect 实例

Parameters:

  • _selector Selector

Returns:

Array of DragSelectInstance:

notification

(
  • _evtName
  • _args
)

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

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

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

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

RECT

() static

用于显示选取范围的矩形

Returns:

selector

selector

()

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

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

Properties

MIN_RECT

Object static

最小拖动范围, 小于这个范围将不予处理

Default: width: 20, height: 20

RECT_TPL

String static

用于显示选取范围的矩形模板

Default: <div class="js_compDragSelect_rect" style="display:none;position:absolute;left: -9999px;"></div>