fix: added delay in draggable for touch devices scrolling will not be affected
This commit is contained in:
parent
2522d6bfab
commit
0cf6eacc1c
4 changed files with 11 additions and 3 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue