Skip to content

Commit 795cdd4

Browse files
shuartshuart
committed
add drag and drop basis to folders
1 parent 1e3c7d4 commit 795cdd4

File tree

3 files changed

+159
-3
lines changed

3 files changed

+159
-3
lines changed

‎src/js/modules/common_ui_components/folder_view/folder_custom_table.js

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1+
import { sortableFolders } from "./folder_sortable.js";
2+
13
export function createFolders({
24
domElement = undefined,
35
childrenOffset=15,
6+
dragAndDrop=true,
7+
onNameClick=function (e, cell) {
8+
console.log("eee");
9+
},
410
data=[
511
{name:"test", _children:[
612
{name:"testChild"},
713
]},
814
{name:"test2"},
9-
{name:"test3"},
15+
{name:"test3", _children:[
16+
{name:"testChild2", _children:[
17+
{name:"testChild3"},
18+
]},
19+
]},
1020
]
1121
}={}) {
1222
var self = {}
@@ -18,22 +28,34 @@ export function createFolders({
1828
var itemData = record.data
1929
var itemElement = document.createElement("div")
2030

31+
itemElement.style.margin = "10px"
2132
if (record.level>0) {
22-
itemElement.style.marginLeft = (record.level*childrenOffset) + "px"
33+
itemElement.style.marginLeft = (record.level*childrenOffset) +10+ "px"
2334
}
2435
if (record.children) {
2536
itemElement.innerHTML += "- "
2637
}
38+
if (dragAndDrop) {
39+
itemElement.draggable=true
40+
itemElement.classList.add("dragging_placeholder")
41+
}
2742

2843
itemElement.innerHTML += itemData.name
2944
itemElement.dataset.did = record.id
45+
46+
itemElement.addEventListener("click", function (event) {
47+
onNameClick(event,record)
48+
})
3049

3150
record.domElement = itemElement //update the record with the dom element
3251
return itemElement
3352
}
3453

3554
var recordData = function (itemData, domElement, parent, level) {
36-
var toRecord = {id:lastId, data:itemData, domElement:domElement, parent, level, children:itemData._children}
55+
var getData= function () {
56+
return itemData
57+
}
58+
var toRecord = {id:lastId, data:itemData, domElement:domElement, parent, level, children:itemData._children, getData}
3759
dataList.push(toRecord)
3860
dataMap[lastId]=toRecord
3961
lastId ++
@@ -47,6 +69,8 @@ export function createFolders({
4769

4870
domElement.innerHTML=""
4971
processItems(data, domElement)
72+
73+
sortableFolders(self, domElement)
5074
}
5175

5276
var processItems = function (items, domElement, parent, level) {

‎src/js/modules/common_ui_components/folder_view/folder_sortable.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
export function sortableFolders(self, section, onUpdate){
2+
var dragEl, nextEl, newPos, dragGhost;
3+
console.log([...section.children]);
4+
5+
// let oldPos = [...section.children].map(item => {
6+
// console.log(item);
7+
// item.draggable = true
8+
// let pos = self.query("#"+item.id).getBoundingClientRect();
9+
// return pos;
10+
// });
11+
12+
function _onDragOver(e){
13+
e.preventDefault();
14+
e.dataTransfer.dropEffect = 'move';
15+
16+
var target = e.target;
17+
if(!target.classList.contains("dragging_placeholder")){
18+
target = target.closest(".dragging_placeholder")
19+
}
20+
if( target && target !== dragEl && target.nodeName == 'DIV' ){
21+
if(target.classList.contains('inside')) {
22+
console.log("inside");
23+
e.stopPropagation();
24+
} else {
25+
26+
var targetPos = target.getBoundingClientRect();//getBoundinClientRect contains location-info about the element (relative to the viewport)
27+
var next = (e.clientY - targetPos.top) / (targetPos.bottom - targetPos.top) > .5 || (e.clientX - targetPos.left) / (targetPos.right - targetPos.left) > .5; //checking that dragEl is dragged over half the target y-axis or x-axis. (therefor the .5)
28+
console.log(dragEl);
29+
console.log(next && target.nextSibling);
30+
console.log(next && target.nextSibling || target);
31+
section.insertBefore(dragEl, next && target.nextSibling || target);
32+
33+
/* console.log("oldPos:" + JSON.stringify(oldPos));
34+
console.log("newPos:" + JSON.stringify(newPos)); */
35+
/* console.log(newPos.top === oldPos.top ? 'They are the same' : 'Not the same'); */
36+
// console.log(oldPos);
37+
}
38+
}
39+
}
40+
41+
section.addEventListener('dragstart', function(e){
42+
dragEl = e.target;
43+
nextEl = dragEl.nextSibling;
44+
45+
e.dataTransfer.effectAllowed = 'move';
46+
e.dataTransfer.setData('Text', dragEl.textContent);
47+
console.log(dragEl);
48+
49+
section.addEventListener('dragover', _onDragOver, false);
50+
section.addEventListener('dragend', _onDragEnd, false);
51+
52+
setTimeout(function (){
53+
dragEl.classList.add('ghost');
54+
}, 0)
55+
56+
});
57+
}
58+
59+
// function sortable(self, section, onUpdate){
60+
// var dragEl, nextEl, newPos, dragGhost;
61+
// console.log([...section.children]);
62+
63+
// let oldPos = [...section.children].map(item => {
64+
// console.log(item);
65+
// item.draggable = true
66+
// let pos = self.query("#"+item.id).getBoundingClientRect();
67+
// return pos;
68+
// });
69+
70+
// function _onDragOver(e){
71+
// e.preventDefault();
72+
// e.dataTransfer.dropEffect = 'move';
73+
74+
// var target = e.target;
75+
// if(!target.classList.contains("dragging_placeholder")){
76+
// target = target.closest(".dragging_placeholder")
77+
// }
78+
// if( target && target !== dragEl && target.nodeName == 'DIV' ){
79+
// if(target.classList.contains('inside')) {
80+
// console.log("inside");
81+
// e.stopPropagation();
82+
// } else {
83+
84+
// var targetPos = target.getBoundingClientRect();//getBoundinClientRect contains location-info about the element (relative to the viewport)
85+
// var next = (e.clientY - targetPos.top) / (targetPos.bottom - targetPos.top) > .5 || (e.clientX - targetPos.left) / (targetPos.right - targetPos.left) > .5; //checking that dragEl is dragged over half the target y-axis or x-axis. (therefor the .5)
86+
// console.log(dragEl);
87+
// console.log(next && target.nextSibling);
88+
// console.log(next && target.nextSibling || target);
89+
// section.insertBefore(dragEl, next && target.nextSibling || target);
90+
91+
// /* console.log("oldPos:" + JSON.stringify(oldPos));
92+
// console.log("newPos:" + JSON.stringify(newPos)); */
93+
// /* console.log(newPos.top === oldPos.top ? 'They are the same' : 'Not the same'); */
94+
// console.log(oldPos);
95+
// }
96+
// }
97+
// }
98+
99+
// function _onDragEnd(evt){
100+
// evt.preventDefault();
101+
// newPos = [...section.children].map(child => {
102+
// let pos = self.query("#"+child.id).getBoundingClientRect();
103+
// return pos;
104+
// });
105+
// console.log(newPos);
106+
// dragEl.classList.remove('ghost');
107+
// section.removeEventListener('dragover', _onDragOver, false);
108+
// section.removeEventListener('dragend', _onDragEnd, false);
109+
110+
// nextEl !== dragEl.nextSibling ? onUpdate(dragEl) : false;
111+
// }
112+
113+
// section.addEventListener('dragstart', function(e){
114+
// dragEl = e.target;
115+
// nextEl = dragEl.nextSibling;
116+
117+
// e.dataTransfer.effectAllowed = 'move';
118+
// e.dataTransfer.setData('Text', dragEl.textContent);
119+
120+
// section.addEventListener('dragover', _onDragOver, false);
121+
// section.addEventListener('dragend', _onDragEnd, false);
122+
123+
// setTimeout(function (){
124+
// dragEl.classList.add('ghost');
125+
// }, 0)
126+
127+
// });
128+
// }

‎src/js/modules/common_ui_components/folder_view/folder_view.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ var setUpTable = function(self){
8080
// console.log(table.rowManager)
8181
var table = createFolders({
8282
domElement:tableAra,
83+
data:itemsList,
84+
onNameClick:function(e, cell){
85+
self.onClick(e, cell)
86+
},
8387
})
8488

8589

0 commit comments

Comments
 (0)