diff --git a/src/UI/Components/Modal/ModalsManage.tsx b/src/UI/Components/Modal/ModalsManage.tsx
index 78e41fbe6..4ad74fcce 100644
--- a/src/UI/Components/Modal/ModalsManage.tsx
+++ b/src/UI/Components/Modal/ModalsManage.tsx
@@ -69,7 +69,7 @@ export class ModalManage
     private RegisterEvent()
     {
         let overflow = this.m_ModalContainer.style.overflow;
-        this.m_ModalContainer.addEventListener('dragstart', e => e.preventDefault());
+        // this.m_ModalContainer.addEventListener('dragstart', e => e.preventDefault());
         this.m_ModalContainer.addEventListener('keydown', e => this.OnKeyDown(e));
         this.m_ModalContainer.addEventListener('focus', () =>
         {
diff --git a/src/UI/Components/SourceManage/CommonPanel.tsx b/src/UI/Components/SourceManage/CommonPanel.tsx
index 0fb57f37a..6caf349a8 100644
--- a/src/UI/Components/SourceManage/CommonPanel.tsx
+++ b/src/UI/Components/SourceManage/CommonPanel.tsx
@@ -2,7 +2,7 @@ import { Alignment, Button, Card, Checkbox, Classes, ContextMenu, Intent, ITreeN
 import { observable, toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DirUrl, FileUrls } from '../../../Common/HostUrl';
+import { DirUrl, FileUrls, TemplateUrls, MaterialUrls, ToplineUrls } from '../../../Common/HostUrl';
 import { MouseKey } from '../../../Common/KeyEnum';
 import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
 import { AppToaster } from '../Toaster';
@@ -71,6 +71,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
         currentPage: 1,
         pageCount: 20
     }
+    private _dragId = "";
     private nodeEls: HTMLElement[];
     constructor(props)
     {
@@ -103,6 +104,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
     private handleSelectData = (e: React.FormEvent<HTMLInputElement>, data) =>
     {
         data.isChecked = e.currentTarget.checked;
+
         if (e.currentTarget.checked)
             this.needDeleteData.add(data);
         else
@@ -551,6 +553,8 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                 break;
         }
         let dataIds = this.getSelectDataIds();
+        if (dataIds.length === 0 && this._dragId)
+            dataIds.push(this._dragId);
         if (targetId && !isNaN(Number(targetId)) && dataIds.length > 0)
         {
             let url = "";
@@ -562,15 +566,15 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                     query.file_ids = dataIds;
                     break;
                 case DirectoryId.MaterialDir:
-                    url = FileUrls.move;
+                    url = MaterialUrls.move;
                     query.material_ids = dataIds;
                     break;
                 case DirectoryId.ToplineDir:
-                    url = FileUrls.move;
+                    url = ToplineUrls.move;
                     query.topline_ids = dataIds;
                     break;
                 case DirectoryId.TemplateDir:
-                    url = FileUrls.move;
+                    url = TemplateUrls.move;
                     query.module_ids = dataIds;
                     break;
                 default:
@@ -654,6 +658,25 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
     {
         this.nodeEls = Array.from(this.tree.querySelectorAll(".bp3-tree-node-content"));
     }
+    private handleDragStart = (e: React.DragEvent<Element>) =>
+    {
+        this._dragId = "";
+        let el = e.target as Element;
+        while (el)
+        {
+            if (el.hasAttribute("data-id"))
+            {
+                this._dragId = el.getAttribute("data-id");
+                break;
+            }
+            if (el.classList.contains("img-lib"))
+                break;
+            el = el.parentElement;
+        }
+
+        if (this.needDeleteData.size === 0 && !this._dragId)
+            e.preventDefault();
+    }
     private handleDragEnd = () =>
     {
         for (let node of this.nodeEls)
@@ -788,10 +811,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                         </div>
                         <Card
                             className="img-lib"
-                            onDragStart={e =>
-                            {
-                                if (this.needDeleteData.size === 0) e.preventDefault();
-                            }}>
+                            onDragStart={this.handleDragStart}>
                             {
                                 React.Children.map(this.props.children, child =>
                                     child && React.cloneElement(child as React.DetailedReactHTMLElement<any, any>,
diff --git a/src/UI/Components/SourceManage/FileList.tsx b/src/UI/Components/SourceManage/FileList.tsx
index 5f80ba043..4b4851767 100644
--- a/src/UI/Components/SourceManage/FileList.tsx
+++ b/src/UI/Components/SourceManage/FileList.tsx
@@ -85,6 +85,7 @@ export class FileList extends React.Component<IFileListProps, {}> {
                             return (
                                 <li
                                     key={file.file_id}
+                                    data-id={file.file_id}
                                 >
                                     <div
                                         className="look-mat"
diff --git a/src/UI/Components/SourceManage/MaterialList.tsx b/src/UI/Components/SourceManage/MaterialList.tsx
index 4ddf9b3fb..593e92c54 100644
--- a/src/UI/Components/SourceManage/MaterialList.tsx
+++ b/src/UI/Components/SourceManage/MaterialList.tsx
@@ -84,7 +84,8 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
                         {
                             return (
                                 <li
-                                    key={mtl.image_id}
+                                    key={mtl.material_id}
+                                    data-id={mtl.material_id}
                                     onDragStart={() => this.handleDragStart(mtl)}
                                 >
                                     <div
diff --git a/src/UI/Components/SourceManage/TexturePanel.less b/src/UI/Components/SourceManage/TexturePanel.less
index c9e6e72cc..ab17d671e 100644
--- a/src/UI/Components/SourceManage/TexturePanel.less
+++ b/src/UI/Components/SourceManage/TexturePanel.less
@@ -1,69 +1,85 @@
-.texturePanel{
+.texturePanel {
     height: 100%;
     padding: 0;
-    &>div:first-child{
+
+    &>div:first-child {
         display: flex;
         justify-content: space-between;
-        .bp3-align-left{
-            flex:1;
+
+        .bp3-align-left {
+            flex: 1;
         }
     }
-    &>div:last-child{
+
+    &>div:last-child {
         height: calc(~"100% - 50px");
         display: flex;
         justify-content: space-between;
         padding: 0;
-        .img-tree{
+
+        .img-tree {
             width: 25%;
             padding: 0;
             overflow: auto;
-            .bp3-tree{
+
+            .bp3-tree {
                 height: 100%;
                 box-shadow: none;
-                &>ul{
+
+                &>ul {
                     max-height: 95%;
                     overflow: auto;
                 }
-                .bp3-tree-node-content-1{
+
+                .bp3-tree-node-content-1 {
                     padding-left: 10px;
                 }
             }
         }
-        .img-lib{
+
+        .img-lib {
             width: 75%;
             padding: 0 10px;
             overflow: visible;
             position: relative;
-            &>ul:first-child{
+
+            &>ul:first-child {
                 list-style: none;
                 display: flex;
                 flex-wrap: wrap;
                 padding: 0;
-                &>li{
+
+                &>li {
                     width: 20%;
                     padding: 5px;
                     position: relative;
-                    .bp3-transition-container{
+
+                    .bp3-transition-container {
                         z-index: 31;
                     }
-                    &>.look-img .bp3-popover-target,.look-mat{
+
+                    &>.look-img .bp3-popover-target,
+                    .look-mat {
                         width: 100%;
                         height: 0px;
                         padding-bottom: 100%;
-                        overflow:hidden;
+                        overflow: hidden;
                         margin: 0;
-                        position:relative;
-                        div{
+                        position: relative;
+
+                        div {
                             position: absolute;
                             left: 0;
                             width: 100%;
                             height: 100%;
                         }
-                        img{
+
+                        img {
                             position: absolute;
                             left: 0;
                         }
-                        .apply-img-hint:hover:before{
+
+                        .apply-img-hint:hover:before {
                             content: "双击应用图片";
                             position: absolute;
                             left: 0;
@@ -76,111 +92,133 @@
                             opacity: 0.5;
                         }
                     }
-                    &>p{
+
+                    &>p {
                         width: 70%;
                         overflow: hidden;
                         padding: 0;
                         margin: 0;
                         white-space: nowrap;
-                        text-overflow:ellipsis
+                        text-overflow: ellipsis
                     }
-                    &>.bp3-control{
+
+                    &>.bp3-control {
                         display: none;
                         position: absolute;
                         top: 5px;
-                        right: 10px;
                         margin: 0;
                         padding: 0;
                         height: 16px;
                         line-height: 16px;
-                        .bp3-control-indicator{
+
+                        .bp3-control-indicator {
                             margin: 0;
                             vertical-align: baseline;
                         }
                     }
-                    &>.selected{
+
+                    &>.selected {
                         display: block;
                     }
-                    &>.bp3-popover-wrapper:not(:first-child){
+
+                    &>.bp3-popover-wrapper:not(:first-child) {
                         position: absolute;
-                        bottom: 20%;
+                        top: 0;
                         right: 0px;
-                        .bp3-button{
+
+                        .bp3-button {
                             display: none;
                         }
-                         svg{
+
+                        svg {
                             color: #ff7373;
                         }
                     }
-                    &:hover>.bp3-control{
+
+                    &:hover>.bp3-control {
                         display: block;
                     }
-                    &:hover>.bp3-popover-wrapper .bp3-button{
+
+                    &:hover>.bp3-popover-wrapper .bp3-button {
                         display: flex;
                     }
-                    &>.bp3-popover-wrapper .bp3-active{
+
+                    &>.bp3-popover-wrapper .bp3-active {
                         display: flex;
                     }
                 }
-                &>.bp3-card>p{
+
+                &>.bp3-card>p {
                     position: static;
                 }
             }
-            .mat-list:first-child{
-                li{
+
+            .mat-list:first-child {
+                li {
                     cursor: pointer;
                 }
-                .look-mat{
-                    user-select:none;
+
+                .look-mat {
+                    user-select: none;
                 }
-                .hint:hover::before{
+
+                .hint:hover::before {
                     content: "双击编辑材质 拖至绘图区应用";
                     position: absolute;
-                    left:20%;
+                    left: 20%;
                     top: 10px;
                     margin: auto;
                     width: 55%;
                     height: 30px;
                     opacity: 0.5;
+                    z-index: 1;
                 }
-                &>li{
+
+                &>li {
                     text-align: center;
-                    &>.bp3-popover-wrapper{
+
+                    &>.bp3-popover-wrapper {
                         position: absolute;
                         top: 5px;
                         right: 0px;
                     }
-                    &>.bp3-control{
-                        right: 10px;
-                        top: 100px;
+
+                    &>.bp3-control {
+                        left: 10px;
+                        top: 10px;
                     }
-                    &>p{
+
+                    &>p {
                         width: 100%;
                         bottom: -10px;
                     }
                 }
             }
-            .bp3-dialog-container{
+
+            .bp3-dialog-container {
                 position: fixed;
                 left: 0;
                 top: 0;
                 z-index: 30;
-                .bp3-dialog{
+
+                .bp3-dialog {
                     width: unset;
                     margin: 0;
                     padding: 0;
                 }
             }
         }
-        
+
     }
 }
-.upload{
-    .thumbnail{
+
+.upload {
+    .thumbnail {
         min-height: 200px;
         position: relative;
         padding: 20px;
-        .thumbnail-list{
+
+        .thumbnail-list {
             list-style: none;
             display: flex;
             flex-wrap: wrap;
@@ -189,29 +227,34 @@
             margin-bottom: 10px;
             max-height: 400px;
             overflow: auto;
-            li{
+
+            li {
                 width: 110px;
                 height: 110px;
                 padding: 10px;
                 position: relative;
-                button{
+
+                button {
                     position: absolute;
                     right: 0;
                     top: 0;
-                    svg{
+
+                    svg {
                         color: #ff7373;
                     }
                 }
             }
         }
     }
-    .thumbnail>div.border{
+
+    .thumbnail>div.border {
         display: block;
-        width:100%;
-        height:180px;
+        width: 100%;
+        height: 180px;
         border: 2px dashed #ccc;
     }
-    .uploadBtn{
+
+    .uploadBtn {
         width: 100px;
         height: 50px;
         line-height: 50px;
@@ -225,38 +268,43 @@
         margin: auto;
         background: #137cbd;
     }
-    .bp3-dialog-footer-actions{
+
+    .bp3-dialog-footer-actions {
         justify-content: space-between;
-        &>div:first-child{
+
+        &>div:first-child {
             line-height: 30px;
         }
     }
-    .bp3-dialog-body{
-        h5{
+
+    .bp3-dialog-body {
+        h5 {
             padding-left: 20px;
             padding-top: 20px;
         }
     }
 }
 
-.newDir{
+.newDir {
     position: fixed;
     top: 10%;
     left: 33%;
     z-index: 25;
-    label.bp3-label{
+
+    label.bp3-label {
         margin-bottom: 0
     }
 }
 
-.pagination{
+.pagination {
     position: absolute;
     bottom: 15px;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    ul{
+
+    ul {
         margin: 0;
         list-style: none;
         display: flex;
@@ -264,7 +312,8 @@
         justify-content: center;
         padding-left: 0;
         flex-wrap: wrap;
-        li{
+
+        li {
             border: 1px solid #137cbd;
             border-radius: 5px;
             height: 36px;
@@ -274,56 +323,66 @@
             line-height: 36px;
             margin-right: 5px;
         }
-        li.active{
+
+        li.active {
             background: #137cbd;
         }
-        li.disabled{
+
+        li.disabled {
             cursor: not-allowed;
             color: #ccc;
             border-color: #ccc;
         }
     }
-    .bp3-label{
+
+    .bp3-label {
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 0;
-        input{
+
+        input {
             width: 35px;
             margin: 0 5px;
         }
     }
 }
 
-.new-mat{
+.new-mat {
     position: fixed;
     // top: 10%;
     // left: 50%;
     // z-index: 25;
     outline: none;
-    .link-shop{
-        &>div{
+
+    .link-shop {
+        &>div {
             position: relative;
-            .bp3-input-action{
-                top: 6px;   
+
+            .bp3-input-action {
+                top: 6px;
             }
-            ul{
+
+            ul {
                 font-size: 16px;
                 position: absolute;
                 top: 36px;
                 left: 0;
                 width: 100%;
-                background:rgb(48, 64, 77);
-                li:hover{
+                background: rgb(48, 64, 77);
+
+                li:hover {
                     background: #137cbd;
                 }
             }
         }
     }
-    &>div:last-child{
+
+    &>div:last-child {
         display: flex;
         justify-content: flex-end;
-        .bp3-button{
+
+        .bp3-button {
             margin-right: 10px;
         }
     }
diff --git a/src/UI/Components/Template/Template.less b/src/UI/Components/Template/Template.less
index 556ed7101..7c907230d 100644
--- a/src/UI/Components/Template/Template.less
+++ b/src/UI/Components/Template/Template.less
@@ -41,13 +41,15 @@
             text-align: center;
 
             &>li {
-                padding: 0 10px;
+                padding: 5px 10px 0 10px;
 
                 &>p {
                     width: 100px;
                     overflow: hidden;
                     white-space: nowrap;
-                    text-overflow: ellipsis
+                    text-overflow: ellipsis;
+                    margin: 0;
+                    line-height: 1;
                 }
             }
         }
@@ -99,7 +101,7 @@
             display: none;
             position: absolute;
             top: 5px;
-            right: 10px;
+            left: 10px;
             margin: 0;
             padding: 0;
             height: 16px;
@@ -117,7 +119,7 @@
 
         &>.bp3-popover-wrapper:not(:first-child) {
             position: absolute;
-            bottom: 20%;
+            top: 0px;
             right: 0px;
 
             .bp3-button {
diff --git a/src/UI/Components/Template/TemplateList.tsx b/src/UI/Components/Template/TemplateList.tsx
index 2fc0ea682..7cc9c3036 100644
--- a/src/UI/Components/Template/TemplateList.tsx
+++ b/src/UI/Components/Template/TemplateList.tsx
@@ -52,7 +52,8 @@ export class TemplateList extends React.Component<ITemplateListProps> {
                         {
                             return (
                                 <li
-                                    key={temp.file_id}
+                                    key={temp.module_id}
+                                    data-id={temp.module_id}
                                     onMouseDown={(e) => this.handleMounseDown(e, temp)}
                                     style={{
                                         background: this.props.currentInfo.id === temp.module_id && "rgba(162, 186, 197, 0.6)",
@@ -132,7 +133,6 @@ export class TemplateList extends React.Component<ITemplateListProps> {
         this.props.currentInfo.id = mid;
         this.props.currentInfo.name = temp.name;
         this.props.currentInfo.logo = temp.logo;
-
         if (e.button === MouseKey.Right)
         {
             this.showContextMenu(e);
diff --git a/src/UI/Components/Template/ToplineList.tsx b/src/UI/Components/Template/ToplineList.tsx
index 02c58283b..8bf930dfe 100644
--- a/src/UI/Components/Template/ToplineList.tsx
+++ b/src/UI/Components/Template/ToplineList.tsx
@@ -182,12 +182,14 @@ export class ToplineList extends React.Component<IToplineListProps, { isContextM
                         return (
                             <li
                                 key={tpline.topline_id}
+                                data-id={tpline.topline_id}
                                 onMouseDown={(e) => this.handleMounseDown(e, tpline)}
                                 style={{
                                     background: this.props.info.id === tpline.topline_id && "rgba(162, 186, 197, 0.34)",
                                 }}
                             >
                                 <div
+                                    draggable
                                     onDoubleClick={() => this.handleDbClick(tpline)}
                                 >
                                     <svg