Skip to content

Commit

Permalink
more work.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sashamilenkovic
sashamilenkovic committed Jan 4, 2024
1 parent ddadfc2 commit 68d95c7
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 67 deletions.
38 changes: 20 additions & 18 deletions docs/pages/playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@ import { dropZone } from "../../src/plugins/dropZone/vue/index";
let firstList = ref(null);
let secondList = ref(null);
let thirdList = ref(null);
let dropZoneHere = ref(null);
let dropZoneHere2 = ref(null);
let firstListValues = ref(["Apple", "Banana", "Orange"]);
let secondListValues = ref(["Pear", "Peach", "Grape"]);
let thirdListValues = ref(["dljfdlf", "test"]);
dragAndDrop({
parent: firstList,
values: firstListValues,
config: {
dragHandles: true,
dragHandleClass: "handle",
//dragHandles: true,
//dragHandleClass: "handle",
dropZoneClass: "opacity",
draggable: (child: HTMLElement) => {
return child.classList.contains("item");
Expand Down Expand Up @@ -47,6 +49,21 @@ onMounted(() => {
// },
//},
});
dragAndDrop({
parent: thirdList,
values: thirdListValues,
config: {
draggable: (child: HTMLElement) => {
return child.classList.contains("item");
},
},
//config: {
// dropZoneClass: "opacity",
// draggable: (child: HTMLElement) => {
// return child.classList.contains("item");
// },
//},
});
});
const testValues1 = computed(() => {
Expand All @@ -65,7 +82,7 @@ setTimeout(() => {
</script>

<template>
<main>
<main style="display: flex">
<div class="container">
<div id="test" ref="dropZoneHere"></div>
<div v-if="showDropZoneHere2" id="test2" ref="dropZoneHere2"></div>
Expand All @@ -91,21 +108,6 @@ setTimeout(() => {
/>
</div>
</div>
<div v-if="true" id="second_list" class="list" ref="secondList">
<div v-for="item in secondListValues" :key="item" :id="item" class="item">
<div class="content">
{{ item }}
</div>
</div>
<input
ref="cartoon"
type="text"
:value="testValues2"
id="second_list_values"
class="values"
/>
<div id="third_list_target">Hello</div>
</div>
</main>
</template>

Expand Down
28 changes: 10 additions & 18 deletions src/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,27 +40,23 @@ export function removeDraggable(child: Node) {
}

/**
* Used when the dragged element enters into another list (not that of its
* initial dragged element parent).
* Used when the dragged element enters into a parent other than its own.
*
* @param eventData
*
* @param data - The transfer data,
* @param hook
*/
export function transfer(
eventData: NodeDragEventData | NodeTouchEventData
): void {
console.log("transfer action", event);
const { State } = eventData.globals;
const lastParent = State.lastParent;

let lastParentValues = [...lastParent.data.getValues(lastParent.el)];

//let lastParentValues = [...event.globals.State.lastParent.data.getValues(e.lastParent)];
let lastParentValues = [
...State.lastParent.data.getValues(State.lastParent.el),
];

const draggedNodeValues = eventData.globals.State.draggedNodes.map(
(x) => x.data.value
);
const draggedNodeValues = State.draggedNodes.map((x) => x.data.value);

// TODO:
lastParentValues = [
...lastParentValues.filter((x) => !draggedNodeValues.includes(x)),
];
Expand All @@ -74,10 +70,10 @@ export function transfer(
targetParentValues.splice(
eventData.targetData.node.data.index,
0,
...State.draggedNodes.map((x) => x.data.value)
...draggedNodeValues
);

lastParent.data.setValues(lastParent.el, lastParentValues);
State.lastParent.data.setValues(State.lastParent.el, lastParentValues);

eventData.targetData.parent.data.setValues(
eventData.targetData.parent.el,
Expand All @@ -94,10 +90,6 @@ export function transfer(
//} else {
// targetParentValues.push(...draggedNodeValues);
//}

//e.lastParentData.setValues(e.lastParent, lastParentValues);

//e.targetParentData.setValues(e.targetParent, targetParentValues);
}

/**
Expand Down
126 changes: 96 additions & 30 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
DNDTouchState,
DNDGlobalsDragState,
NodeTargetData,
DropZoneTargetData,
ParentFromPoint,
NodeFromPoint,
DNDNodeState,
Expand Down Expand Up @@ -223,7 +224,7 @@ function remap(parent: HTMLElement) {
if (config.disabled) {
disabled = true;
removeDraggable(child);
} else if (!config.draggable(child)) {
} else if (config.draggable && !config.draggable(child)) {
//parentData.config?.removeDraggable
// ? parentData.config.removeDraggable(child, state, setDraggable)
// : removeDraggable(child);
Expand Down Expand Up @@ -305,14 +306,74 @@ function remap(parent: HTMLElement) {
// events(child, nodeTouchEvents, nodeTouchEvent);
//}

function dzDragEvent(e: DragEvent): void {
function nodeStateAttrs(targetData: NodeTargetData): DNDNodeState {
return {
draggedNodes: [
{
el: targetData.node.el,
data: targetData.node.data,
},
],
initialParent: {
el: targetData.parent.el,
data: targetData.parent.data,
},
lastParent: {
el: targetData.parent.el,
data: targetData.parent.data,
},
lastValue: targetData.node.data.value,
};
}

function dzDragEvent(e: DragEvent | TouchEvent): void {
if (!(e.currentTarget instanceof HTMLElement)) return;
const targetData = dzTargetData(e.currentTarget);
//const targetData = nodeTargetData(e.currentTarget);

console.log("dzDragEvent", targetData);
return;
//switch (event.event.type) {
// case "dragover":
// if (
// state.lastParent !== event.targetParent &&
// event.draggedParent !== event.targetParent
// ) {
// handleTransfer(event, state);

// state.enterCount++;

// state.leftParent = true;
// }

// break;

// case "drop":
// if (event.targetParent !== event.draggedParent) {
// dzConfig && dzConfig.drop
// ? dzConfig.drop(event, state, transferDrop)
// : transferDrop(event, state);
// }

// break;

// default:
// break;
//}
//if (!isNode(e.currentTarget)) return;

//if (!targetData) return;

//if (e instanceof DragEvent) {
// handleNodeDragEvent(e, targetData);
//} else {
// handleNodeTouchEvent(e, targetData);
//}
return;
e.stopPropagation();

e.preventDefault();

const targetData = dzDragTarget(e);

if (!targetData) return;

const transferData = dragTransfer();
Expand Down Expand Up @@ -390,26 +451,6 @@ function dzDragEvent(e: DragEvent): void {
}
}

function nodeStateAttrs(targetData: NodeTargetData): DNDNodeState {
return {
draggedNodes: [
{
el: targetData.node.el,
data: targetData.node.data,
},
],
initialParent: {
el: targetData.parent.el,
data: targetData.parent.data,
},
lastParent: {
el: targetData.parent.el,
data: targetData.parent.data,
},
lastValue: targetData.node.data.value,
};
}

/**
* Central event listener for all nodes.
*
Expand Down Expand Up @@ -459,23 +500,33 @@ function handleNodeDragEvent(e: DragEvent, targetData: NodeTargetData) {
handleSort(eventData);
} else {
handleTransfer(eventData);

// Transfer return
if (
eventData.targetData.parent.el ===
eventData.globals.State.initialParent.el
) {
eventData.globals.State.leftParent = false;

eventData.globals.State.lastParent = eventData.targetData.parent;
}
}
//} else {
// config.transferReturn(dndEvent, State);
//}
break;
}
}

function handleTransfer(eventData: NodeDragEventData | NodeTouchEventData) {
console.log("handle transfer", eventData);
const dzConfig = eventData.targetData.parent.data.config;

console.log("dzConfig", dzConfig);
//if (eventData.targetData.parent.el === eventData.globals.State.lastParent.el)
// return;

dzConfig.transfer(eventData);

eventData.globals.State.leftParent = true;
const isReturning =
eventData.targetData.parent.el === eventData.globals.State.initialParent.el;

eventData.globals.State.leftParent = !isReturning;

eventData.globals.State.lastParent = eventData.targetData.parent;

Expand Down Expand Up @@ -592,3 +643,18 @@ export function nodeTargetData(node: Node): NodeTargetData | undefined {
},
};
}

export function dzTargetData(
parent: HTMLElement
): DropZoneTargetData | undefined {
const parentData = Data.parents.get(parent);

if (!parentData) return;

return {
parent: {
el: parent,
data: parentData,
},
};
}
6 changes: 5 additions & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,13 @@ export interface ParentFromPoint {
parent: ParentRecord;
}

export interface NodeTargetData {
export interface NodeTargetData extends DropZoneTargetData {
node: NodeRecord;
}

export interface DropZoneTargetData {
parent: ParentRecord;
dropZone: DropZone;
}

export interface ParentTargetData {
Expand Down

0 comments on commit 68d95c7

Please sign in to comment.