pragmatic-drag-androp 如何接管和禁用锚点与图片元素的默认拖拽行为？

pragmatic-drag-androp 如何接管和禁用锚点与图片元素的默认拖拽行为【免费下载链接】pragmatic-drag-and-dropFast drag and drop for any experience on any tech stack项目地址: https://gitcode.com/GitHub_Trending/pr/pragmatic-drag-and-drop页面里的a和img元素在浏览器中默认就是可拖拽的相当于自带draggabletrue。当你在页面中使用 pragmatic-drag-and-drop 的 element adapter 时会遇到两种需求要么希望这些元素被 element adapter 接管、走你自定义的拖拽逻辑事件、drop target、预览要么根本不希望它们被拖出去。这篇文章基于核心包文档中的 Unregistered elements 与 Element adapter 两页说明这两条路径的具体操作方式。前提element adapter 只响应显式注册的元素在开始之前需要理解一个关键事实来自文档原文任何HTMLElement都可以通过加draggabletrue属性变得可拖拽a和img元素默认可拖拽不需要任何属性element adapter只会被显式注册过的元素激活即调用过draggable({element})的元素页面上其他可拖拽元素不会触发它。这意味着一个没有注册过的a被拖拽时走的是浏览器原生拖拽行为你的onDragStart、onDropTargetChange等回调都不会被调用。要接管就必须注册要禁用则直接改属性。准备安装核心包核心包是 vanilla JS 库用 TypeScript 编写可与任意视图库搭配使用。安装命令见 核心包文档# install the core package yarn add atlaskit/pragmatic-drag-and-dropelement adapter 位于独立入口点atlaskit/pragmatic-drag-and-drop/element/adapter核心包把各模块拆分成各自入口点以便只引入用到的代码。路径一用 draggable() 接管锚点或图片的拖拽把目标元素传给draggable()即可。接管后的效果该元素的拖拽由 element adapter 驱动你在注册时传入的事件回调onGenerateDragPreview、onDragStart、onDrag、onDropTargetChange、onDrop都会生效它也能被页面上的dropTargetForElements感知。import { draggable } from atlaskit/pragmatic-drag-and-drop/element/adapter; draggable({ element: myAnchor, });myAnchor是你对a或img元素的引用HTMLElement正是支持draggable属性的接口。draggable()的返回值是一个 cleanup 函数在框架环境如 React中通常在 effect 的清理阶段调用它避免重复注册。接管后需要注意的默认行为外部数据文档明确说明注册锚点或图片为draggable()不会改变浏览器为它们附加外部数据external data的默认行为。拖拽a时浏览器会自动附加text/plain和text/uri-list其中text/uri-list的值就是该锚点的 URL。如果你不希望拖出的数据是锚点默认 URL可以用getInitialDataForExternal()覆盖或追加import { draggable } from atlaskit/pragmatic-drag-and-drop/element/adapter; draggable({ element: myAnchor, getInitialDataForExternal: () ({ // overriding the standard text/uri-list value text/uri-list: someOtherUrl, // adding some new value application/x.something-custom: myCustomData, }), });这里someOtherUrl与myCustomData是文档示例中的变量替换为你自己的值。需要警惕文档中的一条警告附加给外部消费者的数据可以被用户拖放到的任何外部消费者访问不要把私密数据放进去。接管后需要注意的默认行为拖拽预览即使元素已注册为draggable()浏览器在拖拽a/img时仍会自动生成原生拖拽预览。控制方式与其他元素相同见 Drag previews常用两种自定义原生预览用setCustomNativeDragPreview()挂载一个新元素作为预览图import { setCustomNativeDragPreview } from atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview; draggable({ element: myAnchor, onGenerateDragPreview: ({ nativeSetDragImage }) { setCustomNativeDragPreview({ render({ container }) { const preview document.createElement(div); preview.textContent My Preview; Object.assign(preview.style, { padding: 20px, backgroundColor: lightpink, }); container.appendChild(preview); }, nativeSetDragImage, }); }, });或者干脆不要原生预览例如你想自己渲染预览或做类似 resizing 的体验import { disableNativeDragPreview } from atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview; draggable({ element: myAnchor, onGenerateDragPreview({ nativeSetDragPreview }) { disableNativeDragPreview({ nativeSetDragPreview }); }, });disableNativeDragPreview的实现是渲染一张1x1的透明图片作为原生预览文档称这是在多个浏览器和设备上效果最好的隐藏方式。路径二禁用锚点与图片的默认拖拽如果你不需要这些元素被拖无论是拖给浏览器原生行为还是拖给库最简做法是把属性设为draggablefalsea href/home draggablefalseHome/a文档给出的就是这个用法对a和img设置draggablefalse可以关闭浏览器对它们的默认draggabletrue设置。img同理把draggablefalse加到img标签上即可。另一条可编程的替代路径是注册后条件禁用——用canDrag()返回false来阻止拖拽draggable({ element: myAnchor, // disable dragging canDrag: () false, });但文档特别提醒了这个用法的边界当某个draggable的canDrag()返回false时atlaskit/pragmatic-drag-and-drop会在内部调用event.preventDefault()取消整个拖拽操作这会阻止页面上其他draggable被拖动一旦拖拽事件开始单个draggable无法单独退出、把机会让给其他元素。如果只是想禁用某个元素但仍允许父级draggable被拖文档建议改成条件性地调用draggable()本身例如在 React 中根据状态决定是否在 effect 里注册而不是用canDrag()。对于「就是不想让锚点/图片被拖」这个标题场景draggablefalse是最直接、副作用最小的方案因为它不涉及库也不会影响页面上其他已注册的拖拽。如何验证结果文档提供的事件回调可以作为观察点验证接管成功在draggable({ element: myAnchor })中传入onDragStart/onDrop如() console.log(drag started)拖动锚点时如果这些回调开始被调用说明拖拽已由 element adapter 驱动而不是浏览器原生行为也可以注册一个 monitor 全局观察import { monitorForElements } from atlaskit/pragmatic-drag-and-drop/element/adapter; const cleanup monitorForElements({ onDragStart: () console.log(Dragging an element); });验证禁用成功对设置draggablefalse后的a/img执行拖拽此时既不会产生浏览器原生拖拽预览element adapter 的相关事件monitor 的onDragStart等也不会被该元素的拖拽触发。边界与限制draggable()注册不改变浏览器为锚点/图片附加外部数据的默认行为要改数据必须显式提供getInitialDataForExternal()。外部数据对任何外部消费者可见不要附加私密数据文档警告。canDrag()返回false会取消整个拖拽并连带阻止其他draggable不要把它当作「只禁用单个元素」的手段需要局部禁用时优先条件注册或draggablefalse。浏览器仍会为已注册的a/img自动生成拖拽预览需要自定义或关闭时按上文用setCustomNativeDragPreview()或disableNativeDragPreview()处理。更多细节可参考仓库中的 unregistered-elements 文档、drag-previews 文档 与 element adapter 文档。【免费下载链接】pragmatic-drag-and-dropFast drag and drop for any experience on any tech stack项目地址: https://gitcode.com/GitHub_Trending/pr/pragmatic-drag-and-drop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考