diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.cpp b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
index d48ec9ac..aebcd693 100644
--- a/doric-Qt/example/app/demo/DoricDemoBridge.cpp
+++ b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
@@ -25,54 +25,57 @@ void DoricDemoBridge::navigate(QVariant route) {
     name = "Counter.js";
     break;
   case 2:
-    name = "EffectsDemo.js";
+    name = "DraggableDemo.js";
     break;
   case 3:
-    name = "Gobang.js";
+    name = "EffectsDemo.js";
     break;
   case 4:
-    name = "ImageDemo.js";
+    name = "Gobang.js";
     break;
   case 5:
-    name = "InputDemo.js";
+    name = "ImageDemo.js";
     break;
   case 6:
-    name = "LayoutDemo.js";
+    name = "InputDemo.js";
     break;
   case 7:
-    name = "LayoutTestDemo.js";
+    name = "LayoutDemo.js";
     break;
   case 8:
-    name = "ModalDemo.js";
+    name = "LayoutTestDemo.js";
     break;
   case 9:
-    name = "ModularDemo.js";
+    name = "ModalDemo.js";
     break;
   case 10:
-    name = "NetworkDemo.js";
+    name = "ModularDemo.js";
     break;
   case 11:
-    name = "PopoverDemo.js";
+    name = "NetworkDemo.js";
     break;
   case 12:
-    name = "ScrollerDemo.js";
+    name = "PopoverDemo.js";
     break;
   case 13:
-    name = "SimpleDemo.js";
+    name = "ScrollerDemo.js";
     break;
   case 14:
-    name = "SliderDemo.js";
+    name = "SimpleDemo.js";
     break;
   case 15:
-    name = "Snake.js";
+    name = "SliderDemo.js";
     break;
   case 16:
-    name = "StorageDemo.js";
+    name = "Snake.js";
     break;
   case 17:
-    name = "SwitchDemo.js";
+    name = "StorageDemo.js";
     break;
   case 18:
+    name = "SwitchDemo.js";
+    break;
+  case 19:
     name = "TextDemo.js";
     break;
   }
diff --git a/doric-Qt/example/app/main.qml b/doric-Qt/example/app/main.qml
index 4a5bb6e7..f2d5ff92 100644
--- a/doric-Qt/example/app/main.qml
+++ b/doric-Qt/example/app/main.qml
@@ -15,7 +15,7 @@ ApplicationWindow {
 
         ListView {
             width: parent.width
-            model: 19
+            model: 20
             delegate: Rectangle {
                 Column {
                     anchors.centerIn: parent
@@ -27,38 +27,40 @@ ApplicationWindow {
                                 case 1:
                                     return "Counter.js"
                                 case 2:
-                                    return "EffectsDemo.js"
+                                    return "DraggableDemo.js"
                                 case 3:
-                                    return "Gobang.js"
+                                    return "EffectsDemo.js"
                                 case 4:
-                                    return "ImageDemo.js"
+                                    return "Gobang.js"
                                 case 5:
-                                    return "InputDemo.js"
+                                    return "ImageDemo.js"
                                 case 6:
-                                    return "LayoutDemo.js"
+                                    return "InputDemo.js"
                                 case 7:
-                                    return "LayoutTestDemo.js"
+                                    return "LayoutDemo.js"
                                 case 8:
-                                    return "ModalDemo.js"
+                                    return "LayoutTestDemo.js"
                                 case 9:
-                                    return "ModularDemo.js"
+                                    return "ModalDemo.js"
                                 case 10:
-                                    return "NetworkDemo.js"
+                                    return "ModularDemo.js"
                                 case 11:
-                                    return "PopoverDemo.js"
+                                    return "NetworkDemo.js"
                                 case 12:
-                                    return "ScrollerDemo.js"
+                                    return "PopoverDemo.js"
                                 case 13:
-                                    return "SimpleDemo.js"
+                                    return "ScrollerDemo.js"
                                 case 14:
-                                    return "SliderDemo.js"
+                                    return "SimpleDemo.js"
                                 case 15:
-                                    return "Snake.js"
+                                    return "SliderDemo.js"
                                 case 16:
-                                    return "StorageDemo.js"
+                                    return "Snake.js"
                                 case 17:
-                                    return "SwitchDemo.js"
+                                    return "StorageDemo.js"
                                 case 18:
+                                    return "SwitchDemo.js"
+                                case 19:
                                     return "TextDemo.js"
                             }
                         }
diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc
index a2ed6dc4..9a6307ca 100644
--- a/doric-Qt/example/app/qml.qrc
+++ b/doric-Qt/example/app/qml.qrc
@@ -11,6 +11,7 @@
     <qresource prefix="/doric/bundles">
         <file alias="ComponetDemo.js">../../../doric-demo/bundle/src/ComponetDemo.js</file>
         <file alias="Counter.js">../../../doric-demo/bundle/src/Counter.js</file>
+        <file alias="DraggableDemo.js">../../../doric-demo/bundle/src/DraggableDemo.js</file>
         <file alias="EffectsDemo.js">../../../doric-demo/bundle/src/EffectsDemo.js</file>
         <file alias="Gobang.js">../../../doric-demo/bundle/src/Gobang.js</file>
         <file alias="ImageDemo.js">../../../doric-demo/bundle/src/ImageDemo.js</file>
diff --git a/doric-Qt/example/app/test-layout.qml b/doric-Qt/example/app/test-layout.qml
index 9daec340..cd6f72b4 100644
--- a/doric-Qt/example/app/test-layout.qml
+++ b/doric-Qt/example/app/test-layout.qml
@@ -8,33 +8,17 @@ ApplicationWindow {
     height: 800
     title: qsTr("Scroll")
 
-    SwipeView {
-        id: view
+    Rectangle {
+        width: 200; height: 200
+        color: "red"
 
-        currentIndex: 0
-        anchors.fill: parent
+        Drag.active: dragArea.drag.active
 
-        Rectangle {
-            id: firstPage
-            color: 'red'
+        MouseArea {
+            id: dragArea
+            anchors.fill: parent
+
+            drag.target: parent
         }
-        Rectangle {
-            id: secondPage
-            color: 'green'
-        }
-        Rectangle {
-            id: thirdPage
-            color: 'blue'
-        }
-    }
-
-    PageIndicator {
-        id: indicator
-
-        count: view.count
-        currentIndex: view.currentIndex
-
-        anchors.bottom: view.bottom
-        anchors.horizontalCenter: parent.horizontalCenter
     }
 }