fix: added delay in draggable for touch devices scrolling will not be affected

This commit is contained in:
Shariq Ansari 2023-11-01 14:20:26 +05:30
parent 2522d6bfab
commit 0cf6eacc1c
4 changed files with 11 additions and 3 deletions

View file

@ -5,7 +5,7 @@ import AddFieldButton from "./AddFieldButton.vue";
import EditableInput from "./EditableInput.vue";
import { computed, ref } from "vue";
import { useStore } from "../store";
import { move_children_to_parent, confirm_dialog } from "../utils";
import { move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils";
import { useMagicKeys, whenever } from "@vueuse/core";
const props = defineProps(["section", "column"]);
@ -155,6 +155,7 @@ function move_columns_to_section() {
class="column-container"
v-model="column.fields"
group="fields"
:delay="is_touch_screen_device() ? 200 : 0"
:animation="200"
:easing="store.get_animation"
item-key="id"

View file

@ -4,7 +4,7 @@ import Column from "./Column.vue";
import EditableInput from "./EditableInput.vue";
import { ref, computed } from "vue";
import { useStore } from "../store";
import { section_boilerplate, move_children_to_parent, confirm_dialog } from "../utils";
import { section_boilerplate, move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils";
import { useMagicKeys, whenever } from "@vueuse/core";
const props = defineProps(["tab", "section"]);
@ -177,6 +177,7 @@ function move_sections_to_tab() {
v-model="section.columns"
group="columns"
item-key="id"
:delay="is_touch_screen_device() ? 200 : 0"
:animation="200"
:easing="store.get_animation"
:disabled="store.read_only"

View file

@ -2,7 +2,7 @@
import Section from "./Section.vue";
import EditableInput from "./EditableInput.vue";
import { useStore } from "../store";
import { section_boilerplate, confirm_dialog } from "../utils";
import { section_boilerplate, confirm_dialog, is_touch_screen_device } from "../utils";
import draggable from "vuedraggable";
import { ref, computed } from "vue";
import { useMagicKeys, whenever } from "@vueuse/core";
@ -117,6 +117,7 @@ function delete_tab(tab, with_children) {
class="tabs"
v-model="store.form.layout.tabs"
group="tabs"
:delay="is_touch_screen_device() ? 200 : 0"
:animation="200"
:easing="store.get_animation"
item-key="id"
@ -174,6 +175,7 @@ function delete_tab(tab, with_children) {
class="tab-content-container"
v-model="tab.sections"
group="sections"
:delay="is_touch_screen_device() ? 200 : 0"
:animation="200"
:easing="store.get_animation"
item-key="id"

View file

@ -347,3 +347,7 @@ export function confirm_dialog(
d.show();
d.set_message(message);
}
export function is_touch_screen_device() {
return "ontouchstart" in document.documentElement;
}