• Web Design

Get an Awesome Customization with jQuery Drag & Drop Plugins

Need to install a drag-n-drop feature to your website? Look no further, this post includes 14 impressive jQuery Drag & Drop Plugins, so all you need to do is to choose between them. jQuery allows you to create stylish and user friendly websites that are not only attractive, but are also very lightweight what makes them load quickly. This is the one of the main reasons why jQuery has a special place in the field of web development. Here we’re sharing the plugins that will make the interface of your website unequaled, just be creative.

Dragging and dropping can be a very intuitive way for users to interact with your website. People often use drag-and-drop for things like:

• emails from folder to folder;
• items in the lists;
• some objects in games (cards or pieces of puzzle).

As of late, dragging and dropping feature was very hard to do — in fact, it was nearly impossible to get a decent/working cross-browser version. Now with modern browsers and some knowledge of jQuery, drag-and-drop feature is a piece of cake! Good luck with your upgrades.

jQuery mb.containerPlus

This is a useful plugin to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

$(".containerPlus").buildContainers({
containment:"document",
elementsPath:"elements/",
onCreate:function(o){},
onResize:function(o){},
onClose:function(o){},
onCollapse:function(o){},
onIconize:function(o){},
onDrag:function(o){},
onRestore:function(o){},
});

***

jQuery Reel Plugin

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash and Java techniques.

$('#my_image').reel()
$('#my_image').reel({ frames: 27 })
$('#my_image').reel({ klass: 'MyThreeSixty' })

***

CropZoom

CropZoom is a plugin that lets you select an area of an image and then crop it. With this tool you will also be able to zoom in or to zoom out, to drag and rotate an image.

$.fn.cropzoom = function(options){
$options = $.extend(true,$.fn.cropzoom.defaults, options);

return this.each(function() {

//Verificamos que esten los plugins necesarios
if(!$.isFunction($.fn.draggable) || !$.isFunction($.fn.resizable) || !$.isFunction($.fn.slider)){
alert("You must include ui.draggable, ui.resizable and ui.slider to use cropZoom");
return;
}

if($options.image.source == '' || $options.image.width == 0 || $options.image.height == 0){
alert('You must set the source, witdth and height of the image element');
return;

***

jquery.event.drag

A jquery plugin that adds complex drag interactions, to any element, simply and powerfully.

$('#demo1_box')
.bind('drag',function( event ){
$( this ).css({
top: event.offsetY,
left: event.offsetX
});
});

***

jQuery Draggable

This plugin allows to move an image around as if the user was dragging it. For more effective visualization, the plugin can be combined with some other effects such as a zoom feature or an image switcher.

(function(){
/*
 * jQuery 1.2.6 - New Wave Javascript
 *
 * Copyright (c) 2008 John Resig (jquery.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
 * $Rev: 5685 $
 */

// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
	_$ = window.$;

var jQuery = window.jQuery = window.$ = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.fn.init( selector, context );
};

***

jQuery UI Multiple Draggable Plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality and allows the elements to be grouped and dragged as a group. The aim of the plugin is to include all of the current functionality listed in the options.

(function($) {

$.widget("ui.multidraggable", $.extend({}, $.ui.draggable.prototype, {
    _init: function() {

        if (this.options.helper == 'original' && !(/^(?:r|a|f)/).test(this.element.css("position")))
            this.element[0].style.position = 'relative';

        (this.options.addClasses && this.element.addClass("ui-draggable"));
        (this.options.disabled && this.element.addClass("ui-draggable-disabled"));

        this._mouseInit();
       
        this.options.isMain = false;

    },

***

Drag to Share

The plugin allows you to click and hold on an image, plus you can then drag it into a toolbar for sharing. It’s brilliant and intuitive.

 $(function() {
	    
		//cache selector
		var images = $("#content img"),
		  title = $("title").text() || document.title;
		
	    //make images draggable
	    images.draggable({
		  //create draggable helper
		  helper: function()
		  }

***

jQuery List Drag&Sort

A JavaScript file that provides the ability to sort lists using drag and drop. Built on the jQuery framework.

$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "
" });
$("ul").dragsort("destroy");

***

Nettus Drag&Drop

Nettus Drag&Drop plugin allows to move items in the iGoogle style.

var iNettuts = {

jQuery : $,

settings : {
columns : '.column',
widgetSelector: '.widget',
handleSelector: '.widget-head',
contentSelector: '.widget-content',
widgetDefault : {
movable: true,
removable: true,
collapsible: true,
editable: true,
colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green']
},
widgetIndividual : {
intro : {
movable: false,
removable: false,
collapsible: false,
editable: false
}

***

Magn WP – Drag & Drop Uploader

File upload application, with the added benefit of the drag and drop functionality. Allows users to upload quickly and easily multiple files to your server by dragging & dropping them into the drop box or to select files via the traditional uploader pop up. Each upload boasts a full complement of sharing icons so files can be easily distributed to an unlimited audience at the click of a button.

jQuery(document).ready(function() {
   
    var res = magnCreateUploader();
    if (!res)
    {
        return false;
    }
   
    initBrowserWarning();
    initDnD();
   
    jQuery('.dndmedia-insert-link').live('click', function() {
        var title = "Image";// jQuery(this).attr('rel');
        var url = jQuery(this).attr('rel');
        //tinyMCE.execCommand('mceFocus', false); //get('doc_content').
       
        jQuery("#edButtonPreview").click();
        //switchEditors.go('content', 'tinymce');
       
        var res = tinyMCE.execCommand('mceInsertContent',false
        //alert('inserting ok');
    } );
   
    jQuery('.dndmedia-rename-link').live('click', function() {
       
        alert('Under development. This feature will allow you to rename the filename of this image.');
       
        var fullpath = jQuery(this).parent().find('img').attr('src');
        filename = fullpath.replace(/^.*[\\\/]/, '');
        fileext = /[^.]+$/.exec(filename);
        var filename_noext = filename.substr(0, filename.lastIndexOf('.')) || filename;
       
        var new_filename = prompt("Enter new file name", filename_noext);
        if (new_filename != undefined)
        {
           
            return true;
        }
       
    } );
   
    initDnDExtraTools();   
});

***

Collapsible Drag n Drop Panels

Drag n Drop Panels are great to let the users control how they want to see the information as they can arrange various information blocks according to personal preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.

.column{  
    width:49%;  
    margin-right:.5%;  
    min-height:300px;  
    background:#fff;  
    float:left;  
}  
.column .dragbox{  
    margin:5px 2px  20px;  
    background:#fff;  
    position:relative;  
    border:1px solid #ddd;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px;  
}  
.column .dragbox h2{  
    margin:0;  
    font-size:12px;  
    padding:5px;  
    background:#f0f0f0;  
    color:#000;  
    border-bottom:1px solid #eee;  
    font-family:Verdana;  
    cursor:move;  
} 

***

Drag and Drop with Cloning

The plugin allows to drag and drop items with cloning, i.e. the item is being “copied”.

$(document).ready(function () {
//Counter
counter = 0;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
containment: 'frame',
//When first dragged
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({
"left": pos.left,
"top": pos.top
});
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
console.log($(this).attr("id"));
console.log(pos.left)
console.log(pos.top)
}

***

Drag and Drop Example using jQuery JavaScript in HTML

The jQuery UI Droppable plugin makes selected elements droppable. You can specify individually which element can be droppable and which can be only dragged .

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</HEAD>
<BODY>
<DIV id="move" style="width:150px;height:150px;background-color:pink;border:1px solid #999999"> &nbsp; </DIV>
<SCRIPT>
$(document).ready(function(){
$("#move").draggable();
});

***

Drag&Drop with PHP & jQuery

In this tutorial you will find out how using some PHP scripts to create drag and drop effect on your website.

$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});

}, 2000);}

$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {

var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}

***