Skip to content

refactor(dragdrop): Optimize the code according to the review opinion #1332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 11, 2022
Merged

refactor(dragdrop): Optimize the code according to the review opinion #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9a5cbb
refactor(dragdrop): extract const SHADOW_ID
kagol Sep 11, 2022
e41e2df
refactor(dragdrop): Optimize the code according to the review opinion
kagol Sep 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/devui-vue/devui/dragdrop/src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const SHADOW_ID = 'devui-dragdrop-placeholder-shadow';
1 change: 0 additions & 1 deletion packages/devui-vue/devui/dragdrop/src/constant.ts
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/devui-vue/devui/dragdrop/src/draggable-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { changeDragState, deleteInsertedSortableShadow } from './utils';
import { shadowId } from './constant';
import { SHADOW_ID } from './const';

export default {
/**
Expand All @@ -24,7 +24,7 @@ export default {
// dragstart/drag/dragend
el.addEventListener('drag', () => {
changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'true');
if (binding.instance.$root.dropElement && document.getElementById(shadowId)){
if (binding.instance.$root.dropElement && document.getElementById(SHADOW_ID)){
deleteInsertedSortableShadow(binding.instance.$root.dropElement); // 如何让它仅执行1次？
binding.instance.$root.dropElement = null;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/devui-vue/devui/dragdrop/src/droppable-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export default {
el.addEventListener('drop', (event: DragEvent) => {
event.preventDefault();
const dragId = binding.instance.$root.identity;
document.getElementById(dragId).dataset.parent = 'without-drop';
if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea){
document.getElementById(dragId).dataset.parent = 'not-sortable-drop-area';
if (document.getElementById(dragId).dataset.dropArea === document.getElementById(dragId).dataset.dragArea){
return;
}
// 如何定义可放置区域这个问题得商榷一下
Expand Down
27 changes: 15 additions & 12 deletions packages/devui-vue/devui/dragdrop/src/sortable-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { shadowId } from './constant';
import { changeDragState, createInsertSortableShadow, insertDragElement, judgeMouseIsInSortableArea,
exchangeShadowPosition, sameOriginExchangeElementPosition } from './utils';
import { SHADOW_ID } from './const';
import {
createInsertSortableShadow,
judgeMouseIsInSortableArea,
exchangeShadowPosition,
sameOriginExchangeElementPosition,
} from './utils';


export default {
Expand All @@ -22,15 +26,14 @@ export default {
const self = el;
el.addEventListener('dragover', function (event: DragEvent){
event.preventDefault();
const dropArea = [...el.childNodes][1];
const dragId = binding.instance.$root.identity;
if (document.getElementById(dragId)?.dataset.parent === 'sort-drop'){
if (document.getElementById(dragId)?.dataset.parent === 'sortable-drop-area'){
// 说明此时是同源操作（不需要生成shadow）
// sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea);
return;
}
// 需要判定是否存在阴影，否则会出现严重的抖动情况
if (!document.getElementById('shadow0611') && [...self.childNodes[1].children].length === 0){
if (!document.getElementById(SHADOW_ID) && [...self.childNodes[1].children].length === 0){
createInsertSortableShadow([...self.childNodes][1], event, dragId);
} else if ([...self.childNodes[1].children].length >= 1){
// 说明此时想要进行换位操作
Expand All @@ -42,24 +45,24 @@ export default {
// 获取可放置区域
const dropArea = [...el.childNodes][1];
const dragId = binding.instance.$root.identity;
if (document.getElementById(dragId)?.dataset.parent === 'sort-drop'){
if (document.getElementById(dragId)?.dataset.parent === 'sortable-drop-area'){
// 说明是同源（不产生shadow，直接替换）
sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea);
return;
}
// 判断鼠标是否处于drop区域
if (document.getElementById(shadowId)){
dropArea.replaceChild(document.getElementById(dragId), document.getElementById(shadowId));
if (document.getElementById(SHADOW_ID)){
dropArea.replaceChild(document.getElementById(dragId), document.getElementById(SHADOW_ID));
if (document.getElementById(dragId)){
document.getElementById(dragId).dataset.parent = 'sort-drop';
document.getElementById(dragId).dataset.parent = 'sortable-drop-area';
}
}
});
// 主要用来移除shadow
el.addEventListener('dragleave', function (event: Event){
const dropArea = [...el.childNodes][1];
if (document.getElementById(shadowId) && !judgeMouseIsInSortableArea(event, el)){
dropArea.removeChild(document.getElementById(shadowId));
if (document.getElementById(SHADOW_ID) && !judgeMouseIsInSortableArea(event, el)){
dropArea.removeChild(document.getElementById(SHADOW_ID));
}
});
}
Expand Down
67 changes: 38 additions & 29 deletions packages/devui-vue/devui/dragdrop/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { shadowId } from './constant';
import { SHADOW_ID } from './const';

/**
*
Expand All @@ -24,7 +24,7 @@ function getElementStyle (id: string, styleName: string): string {
*/
function createShadow (originId: string): HTMLElement {
const shadow = document.createElement('div');
shadow.id = shadowId;
shadow.id = SHADOW_ID;
shadow.style.background = 'rgb(206, 215, 255)';
shadow.style.width = getElementStyle(originId, 'width');
shadow.style.height = '20px';
Expand All @@ -44,7 +44,17 @@ function createShadow (originId: string): HTMLElement {
* @description
* 改变拖拽元素相应的状态
*/
function changeDragState (el: string, originId: string, dragStart: string, drag: string, dragover: string, drop: string, shouldCreateShadow: string, dragFlag: string): void{
// TODO: 这个方法参数太多，待优化
function changeDragState (
el: string,
originId: string,
dragStart: string,
drag: string,
dragover: string,
drop: string,
shouldCreateShadow: string,
dragFlag: string
): void{
el.dataset.originId = originId;
el.dataset.dragStart = dragStart;
el.dataset.dragover = dragover;
Expand Down Expand Up @@ -75,14 +85,14 @@ function computeCompareElementHeight (compareElement: HTMLCollection): unknown{
function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown, originId: string): void {
const sortDropAreaArr: Array = [...sortDropArea.children];
if (sortDropAreaArr.length === 0){
if (!document.getElementById(shadowId)){
if (!document.getElementById(SHADOW_ID)){
const shadowElement = createShadow(originId);
sortDropArea.appendChild(shadowElement);
}
}else {
for (let index = 0; index < sortDropAreaArr.length; index++){
const compareHeight = computeCompareElementHeight(sortDropAreaArr[index]);
document.getElementById(shadowId) ? sortDropArea.removeChild(document.getElementById(shadowId)) : null;
document.getElementById(SHADOW_ID) ? sortDropArea.removeChild(document.getElementById(SHADOW_ID)) : null;
if (Math.floor(mouseObject.clientY) <= (Math.floor(compareHeight / 2) + sortDropAreaArr[index].getBoundingClientRect().top)){
sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index]);
break;
Expand All @@ -103,7 +113,7 @@ function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown
*/
function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, mouseObject: MouseEvent): void {
for (let index = 0; index < [...dropAreaContainer.children].length; index++){
if (index == [...dropAreaContainer.children].length-1){
if (index === [...dropAreaContainer.children].length-1){
dropAreaContainer.appendChild(document.getElementById(dragId));
break;
}
Expand All @@ -122,9 +132,9 @@ function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, m
*/
function deleteInsertedSortableShadow (dropSortArea: unknown): void{
if (dropSortArea){
if (document.getElementById(shadowId)){
if (dropSortArea.contains(document.getElementById(shadowId))){
dropSortArea.removeChild(document.getElementById(shadowId));
if (document.getElementById(SHADOW_ID)){
if (dropSortArea.contains(document.getElementById(SHADOW_ID))){
dropSortArea.removeChild(document.getElementById(SHADOW_ID));
}
}
}
Expand All @@ -140,12 +150,12 @@ function deleteInsertedSortableShadow (dropSortArea: unknown): void{
function judgeMouseIsInSortableArea (mouse: MouseEvent, sortableArea: Element): boolean{
const { clientX, clientY } = mouse;
// 获取元素的位置
const eleLeft1 = sortableArea.getBoundingClientRect().left;
const eleLeft2 = sortableArea.getBoundingClientRect().right;
const eletop1 = sortableArea.getBoundingClientRect().top;
const eletop2 = sortableArea.getBoundingClientRect().bottom;
const eleLeft = sortableArea.getBoundingClientRect().left;
const eleRight = sortableArea.getBoundingClientRect().right;
const eleTop = sortableArea.getBoundingClientRect().top;
const eleBottom = sortableArea.getBoundingClientRect().bottom;

if ((clientX > eleLeft1) && (clientX < eleLeft2) && (clientY > eletop1) && (clientY < eletop2)){
if ((clientX > eleLeft) && (clientX < eleRight) && (clientY > eleTop) && (clientY < eleBottom)){
return true;
} else {
return false;
Expand Down Expand Up @@ -178,29 +188,28 @@ function sameOriginExchangeElementPosition (mouse: Event, comparedArr: Array, dr
/**
*
* @param mouse 当前鼠标对象
* @param comparedArr 待比较的数组
* @param dropAreaElements 放置区域的元素
* @description
*/
function exchangeShadowPosition (mouse: Event, comparedArr: Array, dragId: string, dropArea: Element): void{
for (let index = 0; index < comparedArr.length; index++){
// TODO: 该方法 if 嵌套太深，待优化
function exchangeShadowPosition (mouse: Event, dropAreaElements: Array, dragId: string, dropArea: Element): void{
for (let index = 0; index < dropAreaElements.length; index++){
// 遇到shadow，直接跳过
if (comparedArr[index]?.id !== 'shadow0611'){
if (Math.floor(mouse.clientY) <= (comparedArr[index].getBoundingClientRect().top)){
console.log('------');
if (comparedArr[index-1]?.id !== 'shadow0611'){
if (document.getElementById('shadow0611')){
dropArea.removeChild(document.getElementById('shadow0611'));
if (dropAreaElements[index]?.id !== SHADOW_ID){
if (Math.floor(mouse.clientY) <= (dropAreaElements[index].getBoundingClientRect().top)){
if (dropAreaElements[index-1]?.id !== SHADOW_ID){
if (document.getElementById(SHADOW_ID)){
dropArea.removeChild(document.getElementById(SHADOW_ID));
}
dropArea.insertBefore(createShadow(dragId), comparedArr[index]);
dropArea.insertBefore(createShadow(dragId), dropAreaElements[index]);
break;
}
}
if (Math.floor(mouse.clientY) > (
comparedArr[comparedArr.length - 1].getBoundingClientRect().top)){
if (index === comparedArr.length - 1 && comparedArr[index]?.id !== 'shadow0611'){
if (Math.floor(mouse.clientY) > dropAreaElements[dropAreaElements.length - 1].getBoundingClientRect().top){
if (index === dropAreaElements.length - 1 && dropAreaElements[index]?.id !== SHADOW_ID){
// 如果存在shadow，则清除
if (document.getElementById('shadow0611')){
dropArea.removeChild(document.getElementById('shadow0611'));
if (document.getElementById(SHADOW_ID)){
dropArea.removeChild(document.getElementById(SHADOW_ID));
}
dropArea.appendChild(createShadow(dragId));
}
Expand Down