phoenix-ui
Version:
future team ui for app with react
670 lines (488 loc) • 22.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" />
<title>src/Drag.js - phoenix-ui</title>
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
</head>
<body class="yui3-smart" _assetsPath="../assets">
<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand mainlogo" href="">
<img alt="phoenix-ui" src="../assets/css/logo.png" title="phoenix-ui">
phoenix-ui
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">主页</a>
</li>
</ul>
<div class="navbar-form navbar-right filterAPi" autocomplete="off">
<input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" />
<ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul>
</div>
</div>
</div>
</nav>
<div id="sidebar">
<h3>模块/类</h3>
<div id="api-tabview-filter">
<input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes">
</div>
<dl id="sidebar_list">
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/基础组件.html">基础组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Button.html">Button</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/ButtonGroup.html">ButtonGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Star.html">Star</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/布局组件.html">布局组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Row.html">Row</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TableView.html">TableView</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Col.html">Col</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Grid.html">Grid</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/弹出框组件.html">弹出框组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Alert.html">Alert</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Dialog.html">Dialog</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Prompt.html">Prompt</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/提示组件.html">提示组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Popover.html">Popover</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Whisper.html">Whisper</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/操作类组件.html">操作类组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/ImageList.html">ImageList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/LoadingList.html">LoadingList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Popup.html">Popup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Slider.html">Slider</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Steps.html">Steps</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Toast.html">Toast</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Accordion.html">Accordion</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Swipe.html">Swipe</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/标签组件.html">标签组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Icon.html">Icon</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Badge.html">Badge</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Label.html">Label</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/菜单组件.html">菜单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Menu.html">Menu</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuBody.html">MenuBody</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuHeader.html">MenuHeader</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuItem.html">MenuItem</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuList.html">MenuList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuNav.html">MenuNav</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/表单组件.html">表单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Input.html">Input</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Switch.html">Switch</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/FormGroup.html">FormGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TextArea.html">TextArea</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/辅助组件.html">辅助组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Drag.html">Drag</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Animate.html">Animate</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/选项卡.html">选项卡</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Tab.html">Tab</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Tabset.html">Tabset</a>
<ul>
</ul>
</li>
</ul>
</dd>
</dl>
<div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div>
</div>
<div class="stdoc-content">
<div class="apidocs">
<div id="docs-main">
<div class="content">
<div class="page-header">
<h1>src/Drag.js <small>File</small></h1>
</div>
<div class="file">
<pre class="prettyprint linenums" id='src_code'>
import React,{PropTypes} from 'react';
import Component from './utils/Component';
import classnames from 'classnames';
import {setPhoenixPrefix,getDeviceInfo} from './utils/Tool';
/**
* 拖拽组件<br/>
* - 兼容移动端的touch和pc端的mouse事件。
* - 可通过onDrag设置抓取的回调函数, 返回抓取在屏幕上的位置, 分别保存在start和move中, 以x和y的形式展示。
* - 可通过onDrop设置松开瞬间的回调函数, 返回松开时在屏幕上的位置, 保存在end中, 以x和y的形式展示。
*
* 示例:
* ```code
* <Drag onDrag={::this.onDrag} onDrop={::this.onDrop} style={{height:0}}>
* <div className="box" ref={(box)=>{this.box = box}}>Drag</div>
* </Drag>
* ```
* ```code
* onDrag(event,position){
* this.prePosition = position.start;
* this.nowPosition = position.move;
*
* this.distanceX = this.preDistanceX + this.nowPosition.x - this.prePosition.x;
* this.distanceY = this.preDistanceY + this.nowPosition.y - this.prePosition.y;
* console.log(this.distanceX, this.distanceY);
* }
* onDrop(event,position){
* this.preDistanceX = this.distanceX;
* this.preDistanceY = this.distanceY;
* }
* ```
*
* @class Drag
* @module 辅助组件
* @extends Component
* @constructor
* @since 1.0.0
* @demo drag|drag.js {展示}
* @show true
* */
export default class Drag extends Component{
static propTypes = {
/**
* 抓取的执行函数,对应TouchStart/TouchMove
* @method onDrag
* @type Function
* */
onDrag: PropTypes.func,
/**
* 放开的执行函数,对应TouchEnd
* @method onDrop
* @type Function
* */
onDrop: PropTypes.func
};
static defaultProps = {
classMapping : {}
};
constructor(props, context) {
super(props, context);
this.mobile = getDeviceInfo('mobile');
this.state = {
position: {}
};
this.onMouseMoveHandle = this.onMouseMove.bind(this);
this.onMouseEndHandle = this.onMouseEnd.bind(this);
this.isMouseDown = false;
}
onTouchStart(event){
let {onDrag, onDragStart} = this.props;
event.stopPropagation();
// event.preventDefault();
this.state.position.start = {x:event.touches[0].pageX, y: event.touches[0].pageY};
this.state.position.move = this.state.position.start;
if(onDrag) onDrag(event, this.state.position);
if(onDragStart) onDragStart(event, this.state.position);
return false;
}
onMouseStart(event){
let {onDrag, onDragStart} = this.props;
this.isMouseDown = true;
event.stopPropagation();
// event.preventDefault();
this.state.position.start = {x:event.pageX, y: event.pageY};
this.state.position.move = this.state.position.start;
if(onDrag) onDrag(event, this.state.position);
if(onDragStart) onDragStart(event, this.state.position);
if(!this.mobile){
document.addEventListener('mousemove',this.onMouseMoveHandle,false);
document.addEventListener('mouseup',this.onMouseEndHandle,false);
}
return false;
}
onTouchMove(event){
event.stopPropagation();
// event.preventDefault();
this.state.position.move = {x:event.touches[0].pageX, y: event.touches[0].pageY};
if(this.props.onDrag) this.props.onDrag(event, this.state.position);
return false;
}
onMouseMove(event){
if(!this.isMouseDown) return;
event.stopPropagation();
// event.preventDefault();
this.state.position.move = {x:event.pageX, y: event.pageY};
if(this.props.onDrag) this.props.onDrag(event, this.state.position);
return false;
}
onTouchEnd(event){
event.stopPropagation();
// event.preventDefault();
this.state.position.end = {x:event.changedTouches[0].pageX, y: event.changedTouches[0].pageY};
this.state.position.start = this.state.position.move;
if(this.props.onDrop) this.props.onDrop(event, this.state.position);
return false;
}
onMouseEnd(event){
event.stopPropagation();
// event.preventDefault();
this.state.position.end = {x:event.pageX, y: event.pageY};
this.state.position.start = this.state.position.move;
if(this.props.onDrop) this.props.onDrop(event, this.state.position);
this.isMouseDown = false;
if(!this.mobile){
document.removeEventListener('mousemove',this.onMouseMoveHandle,false);
document.removeEventListener('mouseup',this.onMouseEndHandle,false);
}
return false;
}
onTouchCancel(event){
// 触屏取消:忽然来电话等情况
}
componentWillUnmount(){
if(!this.mobile){
document.removeEventListener('mousemove',this.onMouseMoveHandle,false);
document.removeEventListener('mouseup',this.onMouseEndHandle,false);
}
}
render(){
return (
<div {...this.props} className={classnames(setPhoenixPrefix("drag-action"), this.props.className)}
onTouchStart={(event)=>{this.onTouchStart(event)}}
onTouchMove={(event)=>{this.onTouchMove(event)}}
onTouchEnd={(event)=>{this.onTouchEnd(event)}}
onTouchCancel={(event)=>{this.onTouchCancel(event)}}
onMouseDown={(event)=>{this.onMouseStart(event)}}
ref={(dragAction)=>{this.dragAction = dragAction;}}
>
{this.props.children}
</div>
);
}
}
</pre>
</div>
</div>
</div>
</div>
</div>
<a id="gotoTop" class='well well-small' href='#'>
</a>
<script src="../assets/vendor/jquery/jquery-1.8.2.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/doc.js"></script>
</body>
</html>