今天分享给大家一些非常棒的的jQuery插件拖放功能。 有了这些插件，你会允许你的访问者个性化的网站和它的工具，根据自己的需要，并以这种方式，你提供定制选项的负载展现方式 [b][url=http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/]jQuery mb.containerPlus[/url][/b] （[url=http://pupunzi.com/#mb.components/mb.containerPlus/containerPlus.html]演示[/url] | [url=http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/]下载[/url]） 在建立功能齐全，完全可换肤的容器，这是一个有用的插件。容器可以设置拖动，调整大小，可折叠和可最小化。 [img]http://files.jb51.net/file_images/article/201204/201204092243322.jpg[/img] [b][url=http://jquery.vostrel.cz/reel#demo]jQuery的卷轴插件[/url][/b] （[url=http://jquery.vostrel.cz/reel#demo]演示[/url] | [url=http://jquery.vostrel.cz/reel#download]下载[/url]） 卷轴是一个jQuery插件，它需要一个图片标签，使现场的“投影”的预建动画帧序列。其目的是要提供360°视角的东西或某个地方。伟大的替代广泛使用的Flash和Java技术。 [img]http://files.jb51.net/file_images/article/201204/201204092243333.jpg[/img] [b][url=http://www.cropzoom.com.ar/index.html]CropZoom[/url][/b] （[url=http://www.cropzoom.com.ar/?page_id=2]演示[/url] | [url=http://www.cropzoom.com.ar/index.html]下载[/url]） CropZoom是一个插件，让你选择的图像区域，然后将它裁剪。白衣这个工具，你也将能够放大或缩小，拖动和旋转图像。 [url=http://www.cropzoom.com.ar/index.html][img]http://files.jb51.net/file_images/article/201204/201204092243334.jpg[/img] [/url] [b][url=http://threedubmedia.com/code/event/drag/]jquery.event.drag[/url][/b] （[url=http://threedubmedia.com/code/event/drag/demo/]演示[/url] | [url=http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.zip]下载[/url]） 特殊事件的jQuery插件，使复杂的拖动交互，任何元素，简单而强大的任务。 [img]http://files.jb51.net/file_images/article/201204/201204092243335.jpg[/img] [b][url=http://plugins.jquery.com/project/TextAreaResizer]jQuery的TextAreaResizer插件[/url][/b] （[url=http://www.itsavesyou.com/TextArea_Resizer_example.htm]演示[/url] | [url=http://plugins.jquery.com/files/TextArea_Resizer_1.0.4.zip]下载[/url]） 该项目允许用户延长在网页的textarea元素/地区时，他们的感受。 [img]http://files.jb51.net/file_images/article/201204/201204092243336.jpg[/img] [b][url=http://archive.plugins.jquery.com/project/ppdrag]PPDRAG[/url][/b] （[url=http://archive.plugins.jquery.com/project/ppdrag]演示[/url] | [url=http://archive.plugins.jquery.com/project/ppdrag]下载[/url]） ppDrag是一个jQuery拖放插件，它模仿了jQuery UI的可拖动的界面。目前支持的是其选择的一小部分，但实施是不同的（ppDrag集中表现）。 [img]http://files.jb51.net/file_images/article/201204/201204092243337.jpg[/img] [b][url=http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html]jQuery的可调整大小和可拖动[/url][/b] （[url=http://viralpatel.net/blogs/demo/jquery-resize-drag/]演示[/url] | [url=http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html]下载[/url]） 在本教程中，我们会告诉你如何做调整和使用jQuery UI的DIV拖动。我会告诉你一个DIV的演示，可以通过调整大小拉起的边缘，也拖累在这里和那里。 [img]http://files.jb51.net/file_images/article/201204/201204092243338.jpg[/img] [b][url=http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html]jQuery UI的多个拖动插件[/url][/b] （[url=http://comp345.awardspace.com/multidraggable/base.html]演示[/url] | [url=http://www.myphpetc.com/2009/11/jquery-ui-multiple-draggable-plugin.html]下载[/url]） jQuery的多重拖动插件jQuery UI的可拖动插件的扩展。这个插件扩展现有的功能，以便为一组进行分组和拖的元素。插件的目的是要包括所有在选项中列出的当前功能。 [img]http://files.jb51.net/file_images/article/201204/201204092243339.jpg[/img] [b][url=http://archive.plugins.jquery.com/project/resizable]可调整大小[/url][/b] （[url=http://www.ajaxplaza.net/resizable/resizable.htm]演示[/url] | [url=http://tympanus.net/Tutorials/DraggableImageBoxesGrid/DraggableImageBoxesGrid.zip]下载[/url]） 有了这个插件，你可以轻松调整与内容的矩形。 [img]http://files.jb51.net/file_images/article/201204/2012040922433310.jpg[/img] [b][url=http://net.tutsplus.com/tutorials/javascript-ajax/drag-to-share/]拖动分享[/url][/b] （[url=http://d2o0t5hpnwv4c1.cloudfront.net/467_dragtoShare/source/dragToShare.html]演示[/url] | [url=http://d2o0t5hpnwv4c1.cloudfront.net/467_dragtoShare/source.zip]下载[/url]） 我们都看到了辉煌混搭新闻故事和有趣的文章，可以共享社交网站的功能;随行物品的图像驱动功能，你点击并按住图像，然后拖动到工具栏分享。它的辉煌和直观的，在这篇文章中，我要告诉你，我们如何能够复制这种行为与jQuery和jQuery UI。 [url=http://net.tutsplus.com/tutorials/javascript-ajax/drag-to-share/][img]http://files.jb51.net/file_images/article/201204/2012040922433311.jpg[/img] [/url] [b][url=https://github.com/can3p/iviewer/wiki/]jQuery的Iviewer[/url][/b] （[url=http://test.dpetroff.ru/jquery.iviewer/test/]演示[/url] | [url=https://github.com/can3p/iviewer/wiki/]下载[/url]） JQuery.iviewer是一个jQuery UI的部件代表的图像浏览器组件，用于加载和查看与能力的图像放大图像和容器中拖动鼠标。 [img]http://files.jb51.net/file_images/article/201204/2012040922433312.jpg[/img] [b][url=http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/]如何模仿的iGoogle界面[/url][/b] （[url=http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html]演示[/url] | [url=http://nettuts.s3.amazonaws.com/127_iNETTUTS/source.zip]下载[/url]） 在本教程中，我们将向您展示如何创建一个部件的可定制的界面。成品将是一个圆滑，并悄悄地编码的iGoogle一样的界面，里面有大量的潜在应用！ [img]http://files.jb51.net/file_images/article/201204/2012040922433313.jpg[/img] [b][url=http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/]使用jQuery和PHP drag'n掉落[/url][/b] （[url=http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/]演示[/url] | [url=http://feeds2.feedburner.com/webresourcesdepot]下载[/url]） drag'n下降一般看起来难以适用，但它肯定是不使用JavaScript框架。这里，它是如何完成使用jQuery和jQuery UI的。 [img]http://files.jb51.net/file_images/article/201204/2012040922433314.jpg[/img] [b][url=http://wayfarerweb.com/jquery/plugins/mapbox/]MapBox[/url][/b] （[url=http://wayfarerweb.com/jquery/plugins/mapbox/]演示[/url] | [url=http://wayfarerweb.com/js/mapbox.min.js]下载[/url]） jQuery的mapbox（）插件是建立规模相对较小，可缩放，多层次的内容拖动地图。这个框架可以适用于游戏，发展计划，或任何布局，可以从中受益，可以放大和平移，以得到更好的视野。 [img]http://files.jb51.net/file_images/article/201204/2012040922433315.jpg[/img] [b][url=http://interface.eyecon.ro/]jQuery的接口插件[/url][/b] （[url=http://interface.eyecon.ro/demos/drag.html]演示[/url] | [url=http://interface.eyecon.ro/download]下载[/url]） 接口是一个丰富的接口组件的集合，它采用了轻量级的JavaScript库jQuery的。有了这个组件，你可以建立丰富的客户端Web应用程序和接口与写作与jQuery的JavaScript简单。 [img]http://files.jb51.net/file_images/article/201204/2012040922433316.jpg[/img] [b][url=http://archive.plugins.jquery.com/project/Dragscrollable]dragscrollable[/url][/b] （[url=http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html]演示[/url] | [url=http://archive.plugins.jquery.com/project/Dragscrollable]下载[/url]） 有了这个插件，你可以建立一个类似的效果，在你拖动一个格的内容作为一个视口的谷歌地图。 [img]http://files.jb51.net/file_images/article/201204/2012040922433317.jpg[/img] [b][url=http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/]表拖放jQuery插件[/url][/b] （[url=http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/]演示[/url] | [url=http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/]下载[/url]） 这TableDnD插件允许用户表内重新排列行例如，如果他们代表一个有序列表（例如优先级的任务）。个别行可以标记为“非拖动和/或非投掷的（其他行不能下降到他们）。行可以有许多必要和细胞的细胞可以包含表单元素。 [img]http://files.jb51.net/file_images/article/201204/2012040922433318.jpg[/img] [b][url=http://jqueryui.com/demos/draggable/]拖动[/url][/b] （[url=http://jqueryui.com/demos/draggable/]演示[/url] | [url=http://jqueryui.com/demos/draggable/]下载[/url]） jQuery UI的可拖动插件通过鼠标拖动选中的元素。 [img]http://files.jb51.net/file_images/article/201204/2012040922433319.jpg[/img] [b][url=http://boagworld.com/dev/creating-a-draggable-sitemap-with-jquery/]用jQuery创建一个可拖动的地图[/url][/b] （[url=http://boagworld.com/demos/sitemap/]演示[/url] | [url=http://boagworld.com/dev/creating-a-draggable-sitemap-with-jquery/]下载[/url]） 在本教程中，我们将建立与jQuery可拖动地图。 [img]http://files.jb51.net/file_images/article/201204/2012040922433320.jpg[/img] [b][url=http://papermashup.com/drag-drop-with-php-jquery/]PHP和jQuery拖放[/url][/b] （[url=http://papermashup.com/demos/jquery-drag-drop/]演示[/url] | [url=http://papermashup.com/demos/jquery-drag-drop/jquery-drag-drop.zip]下载[/url]） 有了这个插件，你可以用PHP和jQuery拖放任何容易。 [img]http://files.jb51.net/file_images/article/201204/2012040922433321.jpg[/img] [b][url=http://tool-man.org/examples/sorting.html]拖放可排序列表[/url][/b] （[url=http://tool-man.org/examples/sorting.html]演示[/url] | [url=http://tool-man.org/examples/ToolManDHTML-0.2.zip]下载[/url]） 拖放可排序的列表，JavaScript和CSS [img]http://files.jb51.net/file_images/article/201204/2012040922433322.jpg[/img] [b][url=http://dragsort.codeplex.com/]jQuery的名单DragSort[/url][/b] （[url=http://dragsort.codeplex.com/]演示[/url] | [url=http://dragsort.codeplex.com/]下载[/url]） 一个JavaScript文件，提供了能够使用拖放排序名单。内置的jQuery框架。 [img]http://files.jb51.net/file_images/article/201204/2012040922433323.jpg[/img] [url=http://woork.blogspot.com/2009/02/ultra-small-code-to-drag-everything-in.html][img]http://files.jb51.net/file_images/article/201204/2012040922433324.jpg[/img] [/url] [b][url=http://charlesmarshall.co.uk/jquery/2008/11/11/jquery-draggable.html]jQuery的可拖动[/url][/b] （[url=http://charlesmarshall.co.uk/jquery/2008/11/11/jquery-draggable.html]演示[/url] | [url=http://github.com/tinyjs/jquery-image-dragging/zipball/master]下载[/url]） [img]http://files.jb51.net/file_images/article/201204/2012040922433325.jpg[/img] [b][url=http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin]拖动和拖放验证码[/url][/b] （[url=http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin]演示[/url] | [url=http://www.webdesignbeach.com/ajax-fancy-captcha-php.zip]下载[/url]） 阿贾克斯花式验证码是一个jQuery插件，可以帮助您保护您的网页，从机器人和垃圾邮件。我们向您介绍一个新的，直观的方式，完成“人性化”的任务验证。为了做到这一点你是问拖放到指定的项目，一个圆圈。 [img]http://files.jb51.net/file_images/article/201204/2012040922433326.jpg[/img] [b][url=http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/index.html]jQuery的：定制的布局，使用拖放（例子）[/url][/b] （[url=http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/index.html]演示[/url] | [url=http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/index.html]下载[/url]） 拖放名单之内和之间的项目。一个视觉辅助显示，该项目将被定位，如果下降。 [img]http://files.jb51.net/file_images/article/201204/2012040922433327.jpg[/img] [b][url=http://dev.iceburg.net/jquery/jqDnR/]jqDnR[/url][/b] （[url=http://dev.iceburg.net/jquery/jqDnR/]演示[/url] | [url=http://dev.iceburg.net/jquery/jqDnR/]下载[/url]） jqDnR是一个轻量级的插件，让你拖动，删除和调整元素的jQuery的。 [img]http://files.jb51.net/file_images/article/201204/2012040922433328.jpg[/img] [b][url=http://webdeveloperplus.com/jQuery/collpasible-drag-drop-panels/]可折叠的拖放列印掉落[/url][/b] （[url=http://demo.webdeveloperplus.com/drag-drop-panels/]演示[/url] | [url=http://demo.webdeveloperplus.com/source-code/drag-drop-panels.zip]下载[/url]） 拖动列印掉落面板是伟大的，让用户控制他/她希望看到的信息，他可以根据自己的喜好来安排各种信息块。这种类型的功能往往通过门户网站或类似的iGoogle个人主页服务的提供。 [img]http://files.jb51.net/file_images/article/201204/2012040922433329.jpg[/img] [b][url=http://archive.plugins.jquery.com/project/dragndrop]dragndrop[/url][/b] （[url=http://www.ajaxplaza.net/dragndrop/dragndrop.htm]演示[/url] | [url=http://archive.plugins.jquery.com/project/dragndrop]下载[/url]） 有了这个插件，你可以拖放一个简单的方法。 [img]http://files.jb51.net/file_images/article/201204/2012040922433330.jpg[/img] [b][url=http://tympanus.net/codrops/2011/10/07/draggable-image-boxes-grid/]拖动图片框格[/url][/b] （[url=http://tympanus.net/Tutorials/DraggableImageBoxesGrid/]演示[/url] | [url=http://tympanus.net/Tutorials/DraggableImageBoxesGrid/DraggableImageBoxesGrid.zip]下载[/url]） 在本教程中，我们将创建一个全屏的图像和内容领域的网格模板。我们的想法是有一个可拖动的网格，显示缩略图和类似物品菜单框。一旦点击，缩略图将扩大到全尺寸的图像和菜单项中，将扩大到全屏的内容区域。 [img]http://files.jb51.net/file_images/article/201204/2012040922433331.jpg[/img] [b][url=http://sagifogel.brinkster.net/]JDock[/url][/b] （[url=http://sagifogel.brinkster.net/]演示[/url] | [url=http://plugins.jquery.com/files/jquery.dock.js.txt]下载[/url]） [img]http://files.jb51.net/file_images/article/201204/2012040922433332.jpg[/img] [b][url=http://wayfarerweb.com/jquery/plugins/animadrag/]animaDrag[/url][/b] （[url=http://wayfarerweb.com/jquery/plugins/animadrag/]演示[/url] | [url=http://wayfarerweb.com/jquery/plugins/animadrag/]下载[/url]） animaDrag是一个超轻量级的拖放插件，是独立的jQuery UI框架。AnimaDrag允许拖动项目jQuery动画，而不允许UI draggables不缓解。 [img]http://files.jb51.net/file_images/article/201204/2012040922433333.jpg[/img] [b][url=http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/]EasyDrag jQuery插件[/url][/b] （[url=http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/]演示[/url] | [url=http://fromvega.com/code/easydrag/jquery.easydrag.handler.beta2.js]下载[/url]） 这很简单，首先你打电话的easydrag（）方法，在旧版本，然后你打电话的setHandler（）方法传递给它的元素的ID，将充当手柄。句柄必须是一个子元素的内容将被拖入。 [img]http://files.jb51.net/file_images/article/201204/2012040922433334.jpg[/img]