Draggable - 拖放插件

   1) SpryMap一个超级轻量级的依赖于 JavaScript 的小组件,能够让 HTML 元素实现类似 Google Maps 中的点击和拖拽效果。

主页:

 

SpryMap

 

      2)Dragdealer JS是一个JavaScript组件,用于创建支持拖拉操作的界面(如:Slider)。可以上下或左右拖拉,定义slider(x/y)的初始位置,设置每次拖拉的步长。
 
Dragdealer JS

 

      3)OverScroll基于Jquery在网页上实施类似 iphone 的拖放滚动效果。
 主页:

 

OverScroll

 

      4)jQuery Drag and Drop 为开发人员实现dom拖拽提供了更简单的方法, 并可以监视对象dom的位置以便进行数据(position)存储...
 
jQuery Drag and Drop

 

      5)Drag and drop table content with JavaScript利用这个JavaScript Lib只需少量代码就能够实现表格内容的拖曳。可以将单元格中的内容拖至其它单元格或其它表格中。
主页:

  6)Table Drag and Drop JQuery plugin这个jQuery插件能够为HTML表格添加行拖放(Drag and Drop)功能。

 
Table Drag and Drop JQuery plugin

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue draggable plus是一个基于Vue.js的第三方插件,它增强了Vue组件之间的拖拽功能,特别适用于需要实现复杂拖放操作的场景,如列表排序、元素定位等。它的核心是利用HTML5的drag and drop API,并提供了额外的增强特性,比如支持设置拖拽选项(如动画效果、方向限制)、提供事件处理器以及处理拖拽结束后的回调。 使用Vue draggable plus,你可以通过以下步骤来实现悬浮拖拽: 1. 安装插件:首先在你的项目中安装`vue.draggable-plus`,可以使用npm或yarn: ```bash npm install vue.draggable-plus --save # 或者 yarn add vue.draggable-plus ``` 2. 引入并配置:在main.js或组件内的script标签里引入并注册组件,同时配置dragable选项: ```js import draggable from 'vue.draggable-plus' Vue.component('draggable-item', draggable({ group: 'items', drag: { delayOnTouchmove: true, // 其他悬浮相关选项,如 cursor-at: 'bottom center' }, ghostClass: 'ghost-item', end: function(event, ui) { console.log('拖动结束:', event, ui) } })) ``` 3. 在模板中使用`<draggable>`标签包裹可拖拽的元素: ```html <draggable-item v-model="items" :list="itemsToDrag"> <!-- 每个拖拽项的内容 --> <div v-for="(item, index) in items" :key="index">{{ item.name }}</div> </draggable-item> ``` 4. 数据绑定和驱动拖拽状态: - `v-model`用于双向数据绑定,控制哪些元素可以被拖拽。 - `list`属性指向可拖动元素的数组,用于指定组内允许拖动的元素集合。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值