소스 검색

优化readme

Z F 7 년 전
부모
커밋
c6d48005d2
2개의 변경된 파일45개의 추가작업 그리고 3개의 파일을 삭제
  1. 4 2
      README.md
  2. 41 1
      dist/index.js

+ 4 - 2
README.md

@@ -160,14 +160,16 @@ ReactDOM.render(
 
 ![非常标准的做法](https://github.com/215566435/Dragact/blob/master/example/image/%E6%89%8B%E6%84%9F%E4%BC%98%E5%8C%96%E5%89%8D%60%60.gif)
 
-再看看```dragact```优化前是怎样的
+
+再看看```dragact```优化前是怎样的
 ![非常长的一条块,已经拖动超出了屏幕很多才会交换方块](https://github.com/215566435/Dragact/blob/master/example/image/%E6%89%8B%E6%84%9F%E4%BC%98%E5%8C%96%E5%89%8D.gif)
 
+
 再看看优化以后的```dragact```是怎样的体验
 ![当长方条的中心,超过下面方块的中心的时候,就会发生移动](https://github.com/215566435/Dragact/blob/master/example/image/%E6%89%8B%E6%84%9F%E4%BC%98%E5%8C%96%E5%90%8E%20.gif)
 
 
-这样的一种优化,带来的是拖动手感的差异,我们向下拖动物块的目的大部分的原因是因为想和下面的某一块物体交换位置。
+这样的一种优化,带来的是拖动手感的差异,我们向下拖动物块的目的,很大程度上是因为想和下方的某一物块交换位置。
 
 通过这种趋势的判断和大量实验,```dragact```选择了重力中心为移动点,更自然,手感更顺滑.
 

+ 41 - 1
dist/index.js

@@ -17,6 +17,7 @@ import { HandleLayout } from "./HandleLayout/index";
 // import { AddRemove } from "./AddRemove/index";
 import { Mobile } from "./mobileLayout/index";
 import './index.css';
+// import { Dragact } from "./lib/dragact";
 var DemoMap = {
     normalLayout: React.createElement(LayoutDemo, null),
     // SortedTable: <SortedTable />,
@@ -54,6 +55,45 @@ var DemoDispatcher = /** @class */ (function (_super) {
     };
     return DemoDispatcher;
 }(React.Component));
-React.createElement(DemoDispatcher, null);
+{
+}
+// const fakeData = [
+//     { GridX: 0, GridY: 0, w: 4, h: 2, key: '0' },
+//     { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
+//     { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
+// ]
+// const getblockStyle = (isDragging: Boolean) => {
+//     return {
+//         background: isDragging ? '#1890ff' : 'white',
+//     }
+// };
+// ReactDOM.render(
+//     <Dragact
+//         layout={fakeData}//必填项
+//         col={16}//必填项
+//         width={800}//必填项
+//         rowHeight={40}//必填项
+//         margin={[5, 5]}//必填项
+//         className='plant-layout'//必填项
+//         style={{ background: '#333' }}//非必填项
+//         placeholder={true}//非必填项
+//     >
+//         {(item: any, provided: any) => {
+//             return (
+//                 <div
+//                     {...provided.props}
+//                     {...provided.dragHandle}
+//                     style={{
+//                         ...provided.props.style,
+//                         ...getblockStyle(provided.isDragging)
+//                     }}
+//                 >
+//                     {provided.isDragging ? '正在抓取' : '停放'}
+//                 </div>
+//             )
+//         }}
+//     </Dragact>,
+//     document.getElementById('root')
+// );
 ReactDOM.render(React.createElement(DemoDispatcher, null), document.getElementById('root'));
 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);