25+ jQuery Drag and Drop Plugins
openkk 13年前
<h3><a href="/misc/goto?guid=4958187152837500887" target="_blank">Ajax Upload; A file upload script with progress-bar, drag-and-drop</a></h3> <p>This plugin uses XHR for uploading multiple files with progress-bar</p> <p><a href="/misc/goto?guid=4958336138449192631"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="drag-drop-upload" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/2ed756c85ec0228339e52414f79949c9.jpg" width="502" height="207" /></a></p> <h3>Drop n’ Save – Drag & Drop Uploader</h3> <p>Need to accept CVs for your recruitment business online? Want to host user images? Or simply share images & files with friends and family? The unique drop and save application allows you to add this facility to your website, today and with minimum hassle.</p> <p><a href="/misc/goto?guid=4958336139249134091"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="drop-n-save" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/668da6b5d4868e49dcf4fd2039e04443.jpg" width="502" height="203" /></a></p> <p><a href="/misc/goto?guid=4958336140055304236" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336140848147247" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p> <h3><a href="/misc/goto?guid=4958336141645597847" target="_blank">jqDnR</a></h3> <p>jqDnR is a lightweight plugin for <a href="/misc/goto?guid=4958200612754615769">jQuery</a> that lets you drag, drop, and resize elements.</p> <p><a href="/misc/goto?guid=4958336143181765413"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="resize-drag" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/ccd8b619476fc6a094ea6e3856e27421.jpg" width="502" height="402" /></a></p> <h3>jQuery Drag Expose | Draggable Image Gallery</h3> <p>Show your photos in a different way – Let the user drag & drop them to slide the gallery!</p> <p><a href="/misc/goto?guid=4958336143974052939"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="drag-expose" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/21abb77e0c7ec6f05e78568f1b02b797.jpg" width="502" height="198" /></a></p> <p><a href="/misc/goto?guid=4958336144766954849" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336145567173559" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p> <h3><a href="/misc/goto?guid=4958336146369179973" target="_blank">Sortable Lists</a></h3> <p>Cool script for rearranging a list via drag & drop</p> <p><a href="/misc/goto?guid=4958336147163056669"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="sortable-list" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/5d36d172466878037b0c2c7757365a11.jpg" width="502" height="176" /></a></p> <h3>jQuery OneByOne Slider Plugin</h3> <p>The OneByOne Slider is a lightweight jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by <a href="/misc/goto?guid=4958194042125578933">Animate.css</a>. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too.</p> <p><a href="/misc/goto?guid=4958336148694445352"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="onebyone-slider-plugin" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/bbc99820f0391fe6691fff11d30bb161.jpg" width="502" height="256" /></a></p> <p><a href="/misc/goto?guid=4958336149488794530" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336150286567605" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p> <h3><a href="/misc/goto?guid=4958336151086020828" target="_blank">Table Drag and Drop JQuery plugin</a></h3> <p>Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.</p> <p><a href="/misc/goto?guid=4958336151871616704"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="dragable-table" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/e867d40358c36a70cb9188c323e14ecc.jpg" width="168" height="137" /></a></p> <h3><a href="/misc/goto?guid=4958336152666064525" target="_blank">Dynamic Drag’n Drop With jQuery And PHP</a></h3> <p>Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using <a href="/misc/goto?guid=4958336153474213473">jQuery</a> & <a href="/misc/goto?guid=4958336154269944348">jQuery UI</a></p> <p><a href="/misc/goto?guid=4958336155065559069"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="jquery-drag-n-drop" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/09a16183860782747be8bbe2aaacb610.jpg" width="502" height="173" /></a></p> <h3>Easy Scroll</h3> <p>This easy scroll application was made to simplify your work and save you time in developing any kind of web template or application, it can be easily inserted in any context and has a wide range of parameters that can make your scrolling unique.</p> <p><a href="/misc/goto?guid=4958336155855933188"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="easy-scroll" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/7d01129f8f219e479ba8b7043d9ff776.jpg" width="502" height="287" /></a></p> <p><a href="/misc/goto?guid=4958336156656650438" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336157450152481" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p> <h3><a href="/misc/goto?guid=4958336158240565425" target="_blank">Draggable</a></h3> <p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p> <p><a href="/misc/goto?guid=4958336159053182011"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="draggable" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/8400f6879d69e16917ea01bdd6734d9c.jpg" width="502" height="223" /></a></p> <h3><a href="/misc/goto?guid=4958336159859543558" target="_blank">Drag-and-Drop with jQuery: Your Essential Guide</a></h3> <p>Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.</p> <p><a href="/misc/goto?guid=4958336160657996055"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="drag-and-drop-guide" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/e3b6742c91702fa0e1c3d3ad016e4d2a.jpg" width="502" height="245" /></a></p> <h3>Zoomer jQuery Products Showcase</h3> <p><strong>Zoomer!</strong> is a cool tool for showcasing products, with its built-in zoom + panning + dragging features, which can be easily customized due to its flexible theme selector and config parameters, directly from the html file. Also more configurations can be edited through the css style sheet file. It comes with 3 themes, Dark, Light & Compact, to make easy the integration on your web project.</p> <p><a href="/misc/goto?guid=4958336161462748831"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="jQuery-zoomer" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/9d4c25d70dc45fb62af9f3fefb5ea29d.jpg" width="352" height="406" /></a></p> <p><a href="/misc/goto?guid=4958336162259033499" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336163063569686" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p> <h3><a href="/misc/goto?guid=4958336163854918444" target="_blank">animaDrag</a></h3> <p>AnimaDrag allows draggable items to be eased by jQuery animation, which UI draggables do not allow. This allows for a richer display of the transition between two locations, with full easing support.</p> <p><a href="/misc/goto?guid=4958336164654651841"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="animadrag" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/51e9ebd72a81797e52d56a10d116a46f.jpg" width="502" height="221" /></a></p> <h3><a href="/misc/goto?guid=4958336165448159983" target="_blank">Ultra small code to drag everything in HTML pages</a></h3> <p>This is a very basic script quick to reuse and customize in your web projects.</p> <h3><a href="/misc/goto?guid=4958336166252495185"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="drag-everything" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/4e09f8ef81ba03b802ee6fbae7ee898c.jpg" width="391" height="225" /></a></h3> <h3><a href="/misc/goto?guid=4958336167057449345">$.event.special.drag</a></h3> <p>This is a jquery special event implementation of a drag event model. It is intended for use by developers who don’t need one bloated script full of idiot-proof logic and a million different options. This plugin simplifies handling drag events, by taking care of the DOM events when you bind a “drag” event handler, and triggering any other handlers at the appropriate time.</p> <p><a href="/misc/goto?guid=4958336167839407879"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="special-drag" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/97cacfd14ea30e9ae526ad3fa1de25fa.jpg" width="502" height="214" /></a></p> <h3><a href="/misc/goto?guid=4958336168637444164">(mb)ConteinersPlus</a></h3> <p>This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.</p> <p><img alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/94b29108e65f63afec5dd7978136d6c2.jpg" width="625" height="250" /></p> <h3><a href="/misc/goto?guid=4958336169435829683">resizable</a></h3> <p>With this plugin you can resize your DOMs in an easy way! <code><br /> </code></p> <p><a href="/misc/goto?guid=4958336170234013942"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="resizable" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/0d7a2e6ff89bbc631f5a5c186ca38060.jpg" width="502" height="212" /></a></p> <h3><a href="/misc/goto?guid=4958336171018126449">ppDrag</a></h3> <p><a href="/misc/goto?guid=4958336171817693201" rel="nofollow">ppDrag</a> is a Drag&Drop plugin for <a href="/misc/goto?guid=4958183308549259819" rel="nofollow">jQuery</a>, which mimics the interface of <a href="/misc/goto?guid=4958336173339076979" rel="nofollow">jQuery UI</a>‘s <a href="/misc/goto?guid=4958336174136592922" rel="nofollow">Draggable</a>. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance). <a href="/misc/goto?guid=4958336174925835613"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="ppdrap" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/bb33855b4dc07e8d1856b85e0e8fad89.jpg" width="502" height="194" /></a></p> <h3><a href="/misc/goto?guid=4958336175723754580">NestedSortable</a></h3> <p>NestedSortable is an extension to the original <a href="/misc/goto?guid=4958336176517762189" rel="nofollow">Sortable from the Interface plugin</a> that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a <a href="/misc/goto?guid=4958336176517762189" rel="nofollow">regular Sortable</a> and allows you to use most options that are inherited from it.</p> <p><a href="/misc/goto?guid=4958336178038509066"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="nested-sortable" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/7c9fe280f7ba61b4f64646af4515bc46.jpg" width="502" height="210" /></a></p> <h3><a href="/misc/goto?guid=4958336178819848425">jQuery File Tree Aza’s revised version</a></h3> <p>Modified version of <a title="http://abeautifulsite.net/notebook/58" href="/misc/goto?guid=4958336179620435018">http://abeautifulsite.net/notebook/58</a> to include drag’n'drop, callbacks and other stuff.</p> <p><img alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/551a36c869b68f7ede49d58a905949e4.jpg" width="625" height="250" /></p> <h3><a href="/misc/goto?guid=4958336180414980524">Dragscrollable</a></h3> <p>Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging. Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.</p> <p><a href="/misc/goto?guid=4958336181210270631"><img style="background-image:none;border-right-width:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="dragscrollable" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/1b8c197d8ecc13905faf5fa424d4538f.jpg" width="502" height="230" /></a></p> <h3><a href="/misc/goto?guid=4958336182017586936">dragndrop</a></h3> <p>Get Drag and drop in a easy way.</p> <p><a href="/misc/goto?guid=4958336182806065706"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="dragndrop" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/ec627186ab6ec69ba6e78df1dbd8bc52.jpg" width="502" height="203" /></a></p> <h3><a href="/misc/goto?guid=4958336183596193782">Collidable Draggables</a></h3> <p>Adds collision detection to draggable objects. Add “collide: ‘block’” or “collide: ‘flag’” when you create a draggable: <code>$(".box").draggable({collide: 'flag'});</code> or <code>$(".box").draggable({collide: 'block'});</code> 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.</p> <h3><a href="/misc/goto?guid=4958336184391185008">jQuery UI multiple draggable plugin</a></h3> <p>The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group. <a href="/misc/goto?guid=4958336185210897359"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="draggable-plugin" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/93bc3ed490f0f52ea4c40e4a6a1cbf22.jpg" width="502" height="188" /></a></p> <h3><a href="/misc/goto?guid=4958336186013579936">jQuery List DragSort</a></h3> <p>A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.</p> <p><a href="/misc/goto?guid=4958336186804726138"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="list-dragsort" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/afa644958472d685c69f4545639b48ba.jpg" width="288" height="214" /></a></p> <h3><a href="/misc/goto?guid=4958336187595219472">Jquery iviewer</a></h3> <p>JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.</p> <p><img alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/97800aa3edfd02da96380b5157b0fd86.jpg" width="625" height="250" /></p> <h3><a href="/misc/goto?guid=4958336188387960291">(mb)ImgNavigator</a></h3> <p>A photogallery for viewing very large images using a navigator map and drag. You can drag your large image in the display by the navigator or the image itself.</p> <p><img alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/4107c2d9c3767ce3c371151079bca218.jpg" width="625" height="250" /></p> <h3><a href="/misc/goto?guid=4958336189180996903" target="_blank">$().mapbox</a></h3> <p>Mapbox is a plugin for creating zooming, draggable maps of limited size and depth, which have a defined boundary. It has many methods such as the ability to center the map on any given point, zoom in or out, zoom to any particular level, and move in any direction. All of these may also be accomplished either by dragging the map or with the mousewheel in conjunction with the mousewheel plugin.</p> <p><img alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/86141e4f23d6b62edc0ca9b6a3264b35.jpg" width="625" height="250" /></p> <h3>Drag n Drop Scattered Gallery</h3> <p>Drag and drop gallery script with various look and feel options.</p> <p><a href="/misc/goto?guid=4958336189979410049"><img style="background-image:none;border-right-width:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;padding-top:0px;" title="scattered-gallery" border="0" alt="25+ jQuery Drag and Drop Plugins" src="https://simg.open-open.com/show/9bb1eba63ef91e4ae66565af42d67991.jpg" width="502" height="279" /></a></p> <p><a href="/misc/goto?guid=4958336190775170321" target="_blank">MORE INFO</a> |<a href="/misc/goto?guid=4958336191582830333" target="_blank">DEMO</a> <em>by Codecanyon (premium plugin)</em></p>