25+ 个 jQuery 网页拖放操作的插件

简介: 这篇文章为你介绍27个jQuery插件,使得你的Web前端具备拖放操作的能力。 Ajax Upload 提供文件拖放上传,并显示上传进度 Drop n’ Save – Drag & Drop Uploader 另外一个文件拖放上传功能的实现。

这篇文章为你介绍27个jQuery插件,使得你的Web前端具备拖放操作的能力。

Ajax Upload

提供文件拖放上传,并显示上传进度

drag-drop-upload

Drop n’ Save – Drag & Drop Uploader

另外一个文件拖放上传功能的实现。

drop-n-save

MORE INFO |DEMO by Codecanyon (premium plugin)

jqDnR

jqDnR作为jQuery是一个轻量级的,让你拖、放自如,并且调整其大小的元素插件。这个插件很简单,重量轻(972字节),非常容易实现。 能够让您的网站更方便用户使用。

resize-drag

jQuery Drag Expose | Draggable Image Gallery

使用一种不同的方式来显示照片,并可进行拖放操作

drag-expose

MORE INFO |DEMO by Codecanyon (premium plugin)

Sortable Lists

很酷的脚本用来对列表进行拖放操作

sortable-list

jQuery OneByOne Slider Plugin

OneByOne Slider 是一个轻量级的 jQuery 插件,可用来显示图片和文本,使用 CSS3 动画效果,支持触摸设备上的左右滑动,可使用鼠标拖放操作进行显示

onebyone-slider-plugin

MORE INFO |DEMO by Codecanyon (premium plugin)

Table Drag and Drop JQuery plugin

在表格内对行数据进行拖放

dragable-table

Dynamic Drag’n Drop With jQuery And PHP

Drag’n drop 是一个完全使用 jQuery & jQuery UI 实现的拖放功能。

jquery-drag-n-drop

Easy Scroll

可轻松实现拖放滚动效果的页面。

easy-scroll

MORE INFO |DEMO by Codecanyon (premium plugin)

Draggable

一个基于jQuery的拖放插件,易于使用,所有的操作均通过调用draggable进行。

draggable

Drag-and-Drop with jQuery: Your Essential Guide

学习如何使用 jQuery 和 jQuery UI 的拖放插件来创建具有拖放效果的 Web 应用,包含一个完整的扑克牌拖放操作演示。

drag-and-drop-guide

Zoomer jQuery Products Showcase

Zoomer! 是一个用来显示产品列表的工具,内置缩放和拖放功能。

jQuery-zoomer

MORE INFO |DEMO by Codecanyon (premium plugin)

animaDrag

AnimaDrag 允许拖拉的元素具有动画效果。

animadrag

Ultra small code to drag everything in HTML pages

这是一个很基本的快速实现拖放操作的教程,可重用以及个性化定制。

drag-everything

$.event.special.drag

这是 jQuery 的事件实现拖放事件模型,开发者无需了解太多拖放的细节。

special-drag

(mb)ConteinersPlus

很有用的插件用于实现皮肤化的容器,支持拖拉、大小更改以及最小化等操作。

drag and drop jquery plugins

resizable

可对元素使用拖放操作来更改大小

resizable

ppDrag

ppDrag 是 jQuery 的拖放插件,简化了 jQuery UI‘s Draggable.ppdrap

NestedSortable

nested-sortable

jQuery File Tree Aza’s revised version

drag and drop jquery plugins

Dragscrollable

用于在一个可视范围内滚动一个很大的嵌套层,类似地图。

dragscrollable

dragndrop

轻松实现拖放操作

dragndrop

Collidable Draggables

Adds collision detection to draggable objects. Add “collide: ‘block’” or “collide: ‘flag’” when you create a draggable: $(".box").draggable({collide: 'flag'}); or$(".box").draggable({collide: 'block'}); In ‘flag’ mode overlapping objects receive new classes – ‘ui-draggable-overlapping’ for the object being dragged and ‘ui-draggable-overlapped’ for the other object. In ‘block’ mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.

jQuery UI multiple draggable plugin

jQuery multiple draggable plugin 是 jQuery UI 的拖放插件扩展,可实现分组拖放draggable-plugin

jQuery List DragSort

一个轻量级的 jQuery 插件,提供拖放排序列表的功能

list-dragsort

Jquery iviewer

JQuery.iviewer 是一个用来在一个固定范围内查看图片的插件,可对图片进行缩放以及拖放移动显示

drag and drop jquery plugins

(mb)ImgNavigator

相册插件,用于显示很大的图片,通过拖放进行浏览

drag and drop jquery plugins

$().mapbox

实现类似 Google 地图的拖拉操作。

drag and drop jquery plugins

Drag n Drop Scattered Gallery

Drag and drop gallery script with various look and feel options.

scattered-gallery

MORE INFO |DEMO by Codecanyon (premium plugin)

英文原文OSCHINA原创翻译

目录
相关文章
|
5天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
39 21
|
6天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
36 16
|
3天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
6天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
5天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
1天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
1天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
5天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
4天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
8 2
|
9天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
35 7