leaferjs
移动端能否配置编辑器选中元素时，滑动非选中区域也能移动元素
看了几个移动端的应用，当选择元素时，滑动非选中区域也能移动元素。 个人感觉这个功能应该挺适合移动端的。找了一下文档，好像没有对应配置。不知道支不支持。
https://github.com/user-attachments/assets/91a6bb5e-4ba6-41d7-a6a4-e2bd63c0a721
支持的，应用需要配置一下 mobile: true，编辑器再配置一下手势移动、缩放。
还支持tap触发选择元素，可以看一下编辑器配置，默认是down事件触发选中。
我是这样配置的，似乎不行🤣： import { ILeaferCanvas, Box, App, version, Rect, Image, LeaferCanvas, } from 'leafer-ui' import { Snap } from 'leafer-x-easy-snap'
import '@leafer-in/editor' import '@leafer-in/export' import '@leafer-in/viewport'
import '@leafer-in/resize' import '@leafer-in/state'
console.log(version) window.onload = async () => { const leafer = new App({ view: window, move: { // drag:'auto' },
// touch: {
// preventDefault: true,
// },
tree: { type: 'design' },
mobile: true,
editor: {
select: 'tap',
moveable: 'gesture',
resizeable: 'gesture',
rotateable: 'gesture',
},
})
const snap = new Snap(leafer)
snap.enable(true)
const box = new Box({ width: 720, height: 720, fill: '#eee', })
const rect = new Image({ x: 10, y: 10, url: 'https://images.unsplash.com/photo-1659300934205-b9f48469e797?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1035', width: 100, height: 100, editable: true, })
const rect2 = new Rect({ x: 10, y: 10, width: 100, height: 100, editable: true, fill: 'green', })
box.addMany(rect, rect2)
leafer.tree.add(box)
snap.updateConfig({ parentContainer: box, })
// window?.flutter_inappwebview?.callHandler('loaded') setTimeout(() => { // rect.export('canvas').then((can) => { // // console.log('exported canvas:', can, can.data instanceof LeaferCanvas) // }) }, 500) }