css fixes
gitea/salix/1757-drag_and_drop_department This commit looks good
Details
gitea/salix/1757-drag_and_drop_department This commit looks good
Details
This commit is contained in:
parent
dadfc92ebd
commit
6d159c50a0
|
@ -47,25 +47,25 @@ export default class Treeview extends Component {
|
|||
}
|
||||
|
||||
dragOver(event) {
|
||||
let scrollY = this.$window.scrollY;
|
||||
|
||||
if (event.clientY < this.draggingY)
|
||||
scrollY -= 2;
|
||||
else scrollY += 2;
|
||||
|
||||
this.draggingY = event.clientY;
|
||||
this.$window.scrollTo(0, scrollY);
|
||||
this.dragClientY = event.clientY;
|
||||
|
||||
// Prevents page reload
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
onDragInterval() {
|
||||
if (this.dragClientY > 0 && this.dragClientY < 75)
|
||||
this.$window.scrollTo(0, this.$window.scrollY - 25);
|
||||
}
|
||||
|
||||
dragStart(event) {
|
||||
event.target.classList.add('dragging');
|
||||
event.dataTransfer.setData('text', event.target.id);
|
||||
|
||||
const element = this.findDroppable(event);
|
||||
this.dragging = element;
|
||||
|
||||
this.interval = setInterval(() => this.onDragInterval(), 100);
|
||||
}
|
||||
|
||||
dragEnd(event) {
|
||||
|
@ -73,6 +73,7 @@ export default class Treeview extends Component {
|
|||
this.undrop();
|
||||
this.dropCount = 0;
|
||||
this.dragging = null;
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
dragEnter(event) {
|
||||
|
@ -102,12 +103,7 @@ export default class Treeview extends Component {
|
|||
const $dropped = this.dropping.$ctrl.item;
|
||||
const $dragged = this.dragging.$ctrl.item;
|
||||
|
||||
if (!$dropped.active && $dropped.sons) {
|
||||
this.unfold($dropped).then(() => {
|
||||
this.emit('drop', {$dropped, $dragged});
|
||||
});
|
||||
} else
|
||||
this.emit('drop', {$dropped, $dragged});
|
||||
this.emit('drop', {$dropped, $dragged});
|
||||
}
|
||||
|
||||
get data() {
|
||||
|
@ -195,14 +191,8 @@ export default class Treeview extends Component {
|
|||
}
|
||||
|
||||
onCreate(parent) {
|
||||
if (this.createFunc) {
|
||||
if (!parent.active && parent.sons) {
|
||||
this.unfold(parent).then(() => {
|
||||
this.createFunc({$parent: parent});
|
||||
});
|
||||
} else
|
||||
this.createFunc({$parent: parent});
|
||||
}
|
||||
if (this.createFunc)
|
||||
this.createFunc({$parent: parent});
|
||||
}
|
||||
|
||||
create(item) {
|
||||
|
@ -210,7 +200,10 @@ export default class Treeview extends Component {
|
|||
let childs = parent.childs;
|
||||
if (!childs) childs = [];
|
||||
|
||||
childs.push(item);
|
||||
if (!parent.active)
|
||||
this.unfold(parent);
|
||||
else
|
||||
childs.push(item);
|
||||
|
||||
if (this.sortFunc) {
|
||||
childs = childs.sort((a, b) =>
|
||||
|
@ -234,7 +227,13 @@ export default class Treeview extends Component {
|
|||
}
|
||||
|
||||
item.parent = newParent;
|
||||
this.create(item);
|
||||
|
||||
if (!newParent.active) {
|
||||
this.unfold(newParent).then(() => {
|
||||
item.parent.sons++;
|
||||
});
|
||||
} else
|
||||
this.create(item);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@ vn-treeview-childs {
|
|||
}
|
||||
|
||||
vn-treeview-child {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
|
||||
.node {
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
@import "variables";
|
||||
|
||||
vn-treeview-content {
|
||||
& > vn-check:not(.indeterminate) {
|
||||
vn-treeview-child {
|
||||
.content > vn-check:not(.indeterminate) {
|
||||
color: $color-main;
|
||||
|
||||
& > .btn {
|
||||
border-color: $color-main;
|
||||
}
|
||||
}
|
||||
& > vn-check.checked {
|
||||
.content > vn-check.checked {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
|
@ -24,14 +24,6 @@ class Controller {
|
|||
}
|
||||
|
||||
onDrop(dropped, dragged) {
|
||||
if (!dropped.active) {
|
||||
this.$.treeview.unfold(dropped).then(() =>
|
||||
this.move(dropped, dragged));
|
||||
} else
|
||||
this.move(dropped, dragged);
|
||||
}
|
||||
|
||||
move(dropped, dragged) {
|
||||
const params = dropped ? {parentId: dropped.id} : null;
|
||||
const query = `/api/departments/${dragged.id}/moveChild`;
|
||||
this.$http.post(query, params).then(() => {
|
||||
|
@ -66,7 +58,6 @@ class Controller {
|
|||
|
||||
const query = `/api/departments/createChild`;
|
||||
this.$http.post(query, params).then(res => {
|
||||
const parent = this.newChild.parent;
|
||||
const item = res.data;
|
||||
item.parent = parent;
|
||||
|
||||
|
|
Loading…
Reference in New Issue