Collection of jQuery Drag and Drop Plugins

http://smashinghub.com/collection-of-jquery-drag-and-drop-plugins.htm

You May Like This Responsive jQuery Slider Plugins, jQuery Carousel Plugins, jQuery Parallax and Scrolling Effect Plugins, Zoom Effects with jQuery Plugins, jQuery Visual Effects Tutorials, Awesome jQuery Plugins and jQuery Tools/Tricks

Collection of jQuery Drag and Drop Plugins

jquery.event.drag

jquery.event.drag is an awesome jQuery special event plugin which lets you add sophisticated drag interactions to any of the elements! Great, right?

How to mimic the iGoogle Interface

Everyone loves iGoogle interface and wants to imitate it. This one is a great tutorial in which you will be taught creating customizable iGoogle like interface with widgets. It is a really easy to follow tutorial and anyone can learn from it.

PPDRAG

This one is a great plugin which imitates the interface of jQuery UI’s Draggable. Presently small subsets of its options are supported.

Resizable

Resizable is a handy plugin which has the ability of resizing rectangles with content with ease.

Jquery Iviewer

It is a jquery UI widget which represents photo component which is used for loading and viewing photos. It allows zooming in a photo and dragging it to the container using your mouse.

Drag’n Drop With jQuery And PHP

Applying drag and drop was once very tough, but now thanks to JavaScript frameworks it is not that tough. Here it is given how you can do it using jQuery & jQuery UI.

MapBox

This jQuery plugin lets you create small scale, zoomable, draggable maps with multiple layers of content. Applying the Framework to games, development plans, or any other layout is possible.

Table Drag and Drop JQuery plugin

Making the rows within a table drag and drop is not an easy task and cannot be achieved through the usual drag and drop tools for many reason, such as the need to move the complete row and not only the cell which gets the mouse events. You are also required to have a certain code for re-parenting a row. Unfortunately the effects such as fade In/fade Out are not very compatible with table rows on all browsers, thus we are required to choose simpler effects.

Dragscrollable

This fabulous plugin allows mimicking the effect as in Google maps i.e., dragging the contents of a div acting as a viewport. Simple, yet amazing!

Interface plugin for jQuery

This plugin boasts a collection of amazing interface components that uses the JavaScript library jQuery. Using this plugin you can create web apps and interface with ease.

Draggable

This one is a simple plugin which simply does what its name says: it allows making chosen elements draggable by mouse.

jQuery: Customizable layout using drag and drop [Examples]

This one shows how and where the things would be positioned after being dropped..

NestedSortable

This one lets you sort vertically and nest elements simultaneously by utilizing drag and drop. You can set it up like a regular Sortable. It allows using most of its options.

animaDrag

animaDrag is a fabulous plugin which is quite small. This drag and drop plugin is not dependent on the jQuery UI framework. Using this plugin you can ease the draggable by jQuery animation.

Ajax Upload; A file upload script with progress-bar, drag-and-drop

This is a really nice plugin which utilizes XHR in order to upload multiple files with progress-bar

jqDnR

jqDnR is a really tiny jQuery plugin which allows dragging, dropping, and resizing elements easily.

(mb)ImgNavigator

This one offers a photo gallery which lets you view large photos by utilizing a navigator map and drag. Dragging the large photo in the display by the navigator or the photo itself is also possible.

Sortable Lists

This one is a really nice script which lets you rearrange a list by dragging and dropping.

Drag-and-Drop with jQuery: Your Essential Guide

If you want to learn using jQuery, jQuery UI Draggable and Droppable plugins, then you should definitely check this one out. It also teaches creating drag-and-drop interfaces for your web pages. It also boasts a drag and drop card game example!

Ultra small code to drag everything in HTML pages

This one is a really simple and and quick script which you can use and customize.

$.event.special.drag

As the name suggests, this one is a jQuery special event implementation of a drag event model. Developers who don’t want a complex script with a lot of different options will find this one really useful. It makes managing drag events easy as it takes care of the DOM events after you have bound a “drag” event handler, and it triggers other handlers at the right time.

jQuery mb.containerPlus

This one is an amazing plugin which allows creating full featured containers. You can set the container to be draggable, resizable, collapsable and minimizable.

CropZoom

As the name suggests, this plugin allows cropping a selected part of a photo. Zooming in or zooming out, dragging or rotating a photo is possible too.

jQuery TextAreaResizer plugin

As the name suggests, this plugin lets you extend the text area where ever you want!

jQuery List DragSort

This one is a handy little plugin that allows sorting lists by dragging and dropping.

Image Upload with Preview and Delete

http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834

모바일에서 브라우저로 파일 업로드 할때 미리보기 기능 구현.

html5 에서 모바일브라우저상의 <input type="file" >을 지원 할때 사용 가능하다.

아래의 Demo가 실행이 되는 브라우저에서는 적용 가능하겠다.

Demo : http://plungjan.name/test/previewjq.html

13 Very Useful jQuery Modal Plugins

http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html

Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).

FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Simple Modal

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content. SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

Lightview

Lightview was built to change the way you overlay content on a website.

jQuery.bPopup.js

bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

LeanModal.js

Bare bones modal dialog windows.

jQuery SuperBox!

jQuery Superbox! is a script which allows you display windows with the lightbox effect.

Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

Reveal: jQuery Modals Made Easy

Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it’s fast, sexy and just works. Now let’s see how easy is can be to get Reveal working!

jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

PrettyPhoto is a jQuery lightbox

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

Simplemodal

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Read more: http://www.smashingapps.com/2013/03/14/13-very-useful-jquery-modal-plugins.html#ixzz2Nqjjf8ZL

Making Custom CSS3 Video Players With HTML5 and Javascript

Additional Resources

Download      Demo

http://codevisually.com/galleria-a-responsive-image-gallery-framework-in-javascript/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+CodeVisually+%28CodeVisually%29&utm_content=FaceBook

Galleria — A responsive JS image gallery framework

Galleria is a responsive image gallery framework built in JavaScript. It makes it simple to create attractive image galleries for the web adn mobile. It doesn’t require programming skills, makes it easy to pull content from several sources (including Flickr, Picasa, and YouTube), and is free without any restrictions. You can even create tailored themes for your projects on a single core.