vue-draggable的原理

vue-draggable的原理是基于sortable.js插件来实现的。sortable.js是一个根据DOM操作实现拖拽功能的插件，而vue-draggable作为一个针对Vue框架的插件，将sortable.js和Vue的数据驱动视图结合起来。

vue-draggable利用Vue的组件化特性，将sortable.js的拖拽功能封装成一个可复用的Vue组件。通过在Vue组件中使用vue-draggable，我们可以直接在Vue的模板中使用拖拽功能，而无需直接操作DOM。

具体实现原理是通过监听用户的拖拽操作，然后更新Vue组件中的数据，从而实现对数据的排序和更新。当用户拖拽某个元素时，vue-draggable会根据sortable.js的回调函数，更新Vue组件中的数据，然后重新渲染视图。

总结来说，vue-draggable通过将sortable.js和Vue的数据驱动视图结合起来，实现了在Vue框架中使用拖拽功能的原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue-draggable-resizable伸缩antdv的a-table表格列时components等数据的写法](https://blog.csdn.net/renovateF5/article/details/124591971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [浅谈vue-draggable原理](https://blog.csdn.net/weixin_43160044/article/details/127349586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]