diff --git a/types/zui/draggable.d.ts b/types/zui/draggable.d.ts
new file mode 100644
index 0000000000..723c304fc7
--- /dev/null
+++ b/types/zui/draggable.d.ts
@@ -0,0 +1,32 @@
+
+interface Postion {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface DraggableEvent {
+    event?: object;
+    element?: object;
+    pos?: Postion;
+    offset?: object;
+    smallOffset?: object;
+    startOffset?: object;
+
+}
+interface DraggableOption {
+    container?: string,
+    move?: boolean;
+    selector?: string,
+    handle?: string,
+    mouseButton?: string,
+    stopPropagation?: boolean,
+    before?(e?: DraggableEvent): boolean;
+    drag?(e: DraggableEvent): void;
+    finish?(e: DraggableEvent): void
+}
+
+interface JQuery {
+    draggable(command: string): JQuery;
+    draggable(option: DraggableOption): JQuery;
+}
\ No newline at end of file
diff --git a/types/zui/index.d.ts b/types/zui/index.d.ts
index 4db802ff52..78ce948431 100644
--- a/types/zui/index.d.ts
+++ b/types/zui/index.d.ts
@@ -13,7 +13,7 @@
 
 ///<reference path="modal.trigger.d.ts" />
 ///<reference path="color.d.ts" />
-
+///<reference path="draggable.d.ts" />
 /*~ If this module is a UMD module that exposes a global variable 'myLib' when
  *~ loaded outside a module loader environment, declare that global here.
  *~ Otherwise, delete this declaration.
diff --git a/types/zui/zui-tests.ts b/types/zui/zui-tests.ts
index 9848744732..426a54ce43 100644
--- a/types/zui/zui-tests.ts
+++ b/types/zui/zui-tests.ts
@@ -83,7 +83,7 @@ $('#myPopover').popover('show');
  * collapse
  */
 $('#myCollapseContent').collapse({
-   toggle: false
+    toggle: false
 });
 $().collapse('show')
 
@@ -101,22 +101,22 @@ $('.carousel').carousel()
  */
 // 仅选择日期
 $(".form-date").datetimepicker(
-{
-    language:  "zh-CN",
-    weekStart: 1,
-    todayBtn:  1,
-    autoclose: 1,
-    todayHighlight: 1,
-    startView: 2,
-    minView: 2,
-    forceParse: 0,
-    format: "yyyy-mm-dd"
-});
+    {
+        language: "zh-CN",
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        minView: 2,
+        forceParse: 0,
+        format: "yyyy-mm-dd"
+    });
 // 选择时间
 $(".form-time").datetimepicker({
-    language:  "zh-CN",
+    language: "zh-CN",
     weekStart: 1,
-    todayBtn:  1,
+    todayBtn: 1,
     autoclose: 1,
     todayHighlight: 1,
     startView: 1,
@@ -127,35 +127,35 @@ $(".form-time").datetimepicker({
 });
 // 选择时间和日期
 $(".form-datetime").datetimepicker(
-{
-    weekStart: 1,
-    todayBtn:  1,
-    autoclose: 1,
-    todayHighlight: 1,
-    startView: 2,
-    forceParse: 0,
-    showMeridian: 1,
-    format: "yyyy-mm-dd hh:ii"
-});
+    {
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        forceParse: 0,
+        showMeridian: 1,
+        format: "yyyy-mm-dd hh:ii"
+    });
 
 // 仅选择日期
 $(".form-date").datetimepicker(
-{
-    language:  "zh-CN",
-    weekStart: 1,
-    todayBtn:  1,
-    autoclose: 1,
-    todayHighlight: 1,
-    startView: 2,
-    minView: 2,
-    forceParse: 0,
-    format: "yyyy-mm-dd"
-});
+    {
+        language: "zh-CN",
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        minView: 2,
+        forceParse: 0,
+        format: "yyyy-mm-dd"
+    });
 // 选择时间
 $(".form-time").datetimepicker({
-    language:  "zh-CN",
+    language: "zh-CN",
     weekStart: 1,
-    todayBtn:  1,
+    todayBtn: 1,
     autoclose: 1,
     todayHighlight: 1,
     startView: 1,
@@ -185,4 +185,23 @@ var myColor = new $.zui.Color('#095823');
 var myHsl = myColor.toHsl();
 
 var zuiPrimaryColor = $.zui.colorset.get('primary');
-console.log('ZUI primary color is', zuiPrimaryColor.toCssStr());
\ No newline at end of file
+console.log('ZUI primary color is', zuiPrimaryColor.toCssStr());
+
+/**
+ * 
+ */
+let count = 0;
+$('#draggableBtn').draggable({
+    container: '#draggableBox',
+    before: function () {
+        console.log(count++ + ': ' + '[开始] 拖动...\n');
+        return true;
+    },
+    drag: function (e: DraggableEvent) {
+        console.log(count++ + ': ' + '拖动: pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
+        //        console.log('(' + e.pos.left + ', ' + e.pos.top + ')');
+    },
+    finish: function (e: DraggableEvent) {
+        console.log(count++ + ': ' + '[完毕]：pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
+    }
+});
\ No newline at end of file