From d3fb7910fb217c818d65a6713211c2e70f30e221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E7=94=9F=E7=9F=B3?= <ding25199@163.com>
Date: Fri, 16 Apr 2021 10:08:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=BB=E5=8A=A1=E7=9A=84=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E9=95=BF=E6=8C=89=E6=8B=96=E6=8B=BD=E6=BB=9A=E5=8A=A8=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E9=AB=98=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E7=9A=84?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/project/space/task.vue | 98 +++++++++++++++++++++++++++-----
 1 file changed, 83 insertions(+), 15 deletions(-)

diff --git a/src/views/project/space/task.vue b/src/views/project/space/task.vue
index 948af7c..821d797 100644
--- a/src/views/project/space/task.vue
+++ b/src/views/project/space/task.vue
@@ -1,17 +1,16 @@
 <template>
-    <div class="project-space-task" :class="`${project.task_board_theme} ${viewType}`">
-        <div class="project-navigation">
-            <div class="project-nav-header">
-                <a-breadcrumb>
-                    <a-breadcrumb-item>
-                        <a @click="toHome">
-                            <a-icon type="home"/>
-                            首页
-                        </a>
-                    </a-breadcrumb-item>
-                    <a-breadcrumb-item>
-                        <project-select class="nav-title" style="display: inline-block" :code="code"></project-select>
-                        <span class="actions">
+	<div class="project-space-task" :class="`${project.task_board_theme} ${viewType}`">
+		<div class="project-navigation">
+			<div class="project-nav-header">
+				<a-breadcrumb>
+					<a-breadcrumb-item>
+						<a @click="toHome">
+							<a-icon type="home" /> 首页
+						</a>
+					</a-breadcrumb-item>
+					<a-breadcrumb-item>
+						<project-select class="nav-title" style="display: inline-block" :code="code"></project-select>
+						<span class="actions">
                              <a-tooltip :mouseEnterDelay="0.3" :title="project.collected ? '取消收藏' : '加入收藏'"
                                         @click="collectProject">
                             <a-icon type="star" theme="filled" style="color: grey;" v-show="!project.collected"/>
@@ -63,7 +62,8 @@
         <wrapper-content :showHeader="false">
             <draggable e v-show="viewType == 'task-board'" v-model="taskStages"
                        :options="{group:'stages',filter:'.undraggables',handle:'.ui-sortable-handle',ghostClass:'stage-ghost',animation: 200,forceFallback:false}"
-                       id="board-scrum-stages" class="board-scrum-stages" @end="stageSort">
+                       id="board-scrum-stages" class="board-scrum-stages" @end="stageSort"
+                       v-dragscroll2>
                 <div class="scrum-stage" v-for="(stage,index) in taskStages" :key="index" :id="stage.code"
                      :class="{ 'fixed-creator': stage.fixedCreator == true}">
                     <!--<a-spin wrapperClassName="tasks-loading" :spinning="stage.tasksLoading">-->
@@ -808,6 +808,74 @@
             this.getProject();
             this.getProjectMembers();
             this.init();
+        },
+         directives: {
+            dragscroll2: function (el) {
+            // el.oncontextmenu = function (ev) {
+            el.onmousedown = function (ev) {
+                console.log(ev.target.classList);
+                const exclude = [
+                "task-content",
+                "task-content-set",
+                "task-content",
+                "stage-name",
+                "scrum-stage-header",
+                "task-creator-handler",
+                "ant-btn",
+                "ant-input",
+                ];
+                const isExclude = exclude.some((item) =>
+                ev.target.classList.contains(item)
+                );
+                if (isExclude) {
+                // document.onmousemove = null;
+                // document.onmouseup = null;
+                // el.style["scroll-behavior"] = originalScrollBehavior;
+                // el.style["pointer-events"] = originalPointerEvents;
+                return;
+                }
+
+                ev.stopPropagation();
+                ev.preventDefault();
+                document.body.style.cursor = "move";
+                const disX = ev.clientX;
+                const disY = ev.clientY;
+                const originalScrollLeft = el.scrollLeft;
+                const originalScrollTop = el.scrollTop;
+                const originalScrollBehavior = el.style["scroll-behavior"];
+                const originalPointerEvents = el.style["pointer-events"];
+                el.style["scroll-behavior"] = "auto";
+                let elEvent = ev;
+                // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
+                document.onmousemove = function (ev) {
+                ev.stopPropagation();
+                ev.preventDefault();
+                // elEvent.target.style.cursor = "move";
+                // ev.target.style.cursor = "move";
+                document.body.style.cursor = "move";
+
+                const distanceX = ev.clientX - disX;
+                const distanceY = ev.clientY - disY;
+                el.scrollTo(
+                    originalScrollLeft - distanceX,
+                    originalScrollTop - distanceY
+                );
+                // 由于我们的图片本身有点击效果，所以需要在鼠标拖动的时候将点击事件屏蔽掉
+                el.style["pointer-events"] = "none";
+                };
+                document.onmouseup = function (ev) {
+                ev.stopPropagation();
+                // elEvent.target.style.cursor = "auto";
+                // ev.target.style.cursor = "auto";
+                document.body.style.cursor = "auto";
+
+                document.onmousemove = null;
+                document.onmouseup = null;
+                el.style["scroll-behavior"] = originalScrollBehavior;
+                el.style["pointer-events"] = originalPointerEvents;
+                };
+            };
+            },
         },
         methods: {
             init() {
@@ -1452,4 +1520,4 @@
             position: inherit !important;
         }
     }
-</style>
+</style>
\ No newline at end of file
-- 
Gitee