diff --git a/demo-app/src/demo.js b/demo-app/src/demo.js
index c431906..fc35fdf 100644
--- a/demo-app/src/demo.js
+++ b/demo-app/src/demo.js
@@ -52,7 +52,8 @@ export default class DemoTimeline extends Component {
       message: '',
       timelineMode: TIMELINE_MODES.SELECT | TIMELINE_MODES.DRAG | TIMELINE_MODES.RESIZE,
       useTable: true,
-      useMoment: true
+      useMoment: true,
+      allowVerticalDrag: false
     };
     this.reRender = this.reRender.bind(this);
     this.zoomIn = this.zoomIn.bind(this);
@@ -63,6 +64,7 @@ export default class DemoTimeline extends Component {
     this.toggleResizable = this.toggleResizable.bind(this);
     this.toggleUseMoment = this.toggleUseMoment.bind(this);
     this.toggleUseTable = this.toggleUseTable.bind(this);
+    this.toggleVerticalDrag = this.toggleVerticalDrag.bind(this);
   }
 
   componentWillMount() {
@@ -166,6 +168,11 @@ export default class DemoTimeline extends Component {
     this.setState({useTable: !useTable});
   }
 
+  toggleVerticalDrag() {
+    const {allowVerticalDrag} = this.state;
+    this.setState({allowVerticalDrag: !allowVerticalDrag});
+  }
+
   handleItemClick = (e, key) => {
     const message = `Item Click ${key}`;
     const {selectedItems} = this.state;
@@ -288,7 +295,8 @@ export default class DemoTimeline extends Component {
       useCustomRenderers,
       timelineMode,
       useMoment,
-      useTable
+      useTable,
+      allowVerticalDrag
     } = this.state;
     const rangeValue = [startDate, endDate];
     const minMaxRangeValue = [minDate, maxDate];
@@ -402,6 +410,11 @@ export default class DemoTimeline extends Component {
                 Use table
               </Checkbox>
             </Form.Item>
+            <Form.Item>
+              <Checkbox onChange={this.toggleVerticalDrag} checked={allowVerticalDrag}>
+                Alow vertical drag
+              </Checkbox>
+            </Form.Item>
           </Form>
           <div>
             <span>Debug: </span>
@@ -466,6 +479,7 @@ export default class DemoTimeline extends Component {
           onRowContextClick={this.handleRowContextClick}
           onRowDoubleClick={this.handleRowDoubleClick}
           itemRenderer={useCustomRenderers ? CustomItemRenderer : ItemRenderer}
+          allowSegmentVerticalDragFunction={(_) => allowVerticalDrag}
         />
       </div>
     );
diff --git a/src/timeline.js b/src/timeline.js
index d5a30a5..e3a5192 100644
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -498,7 +498,12 @@ export default class Timeline extends React.Component {
      *
      * @type { undefined | boolean}
      */
-    showZommShortcuts: PropTypes.bool
+    showZommShortcuts: PropTypes.bool,
+
+    /**
+     * @type {undefined | (selectedItems: (number | string)[]) => boolean}
+     */
+    allowSegmentVerticalDragFunction: PropTypes.func
   };
 
   static defaultProps = {
@@ -1401,6 +1406,7 @@ export default class Timeline extends React.Component {
           let animatedItems = this._gridDomNode.querySelectorAll("span[isDragging='True'") || [];
 
           let dx = (parseFloat(target.getAttribute('drag-x')) || 0) + e.dx;
+          // this is location for calculate the new dy using allowSegmentVerticalDragFunction function
           let dy = (parseFloat(target.getAttribute('drag-y')) || 0) + e.dy;
           let selections = [];