Multiple Drag and Drop with jQuery

I took inspiration from David Walsh and updated his Drag and Drop script to be able to handle multiple Drag and Drop sections on one page at the same time. Plus I cleaned it up a bit by adding all the functions to a JavaScript object. As jQuery is my preferred JavaScript library this code is using the jQuery version.

Checkout the demo

/* create object */
function DragNDropList(selector){
  this.list = $(selector);
  this.sortInput = jQuery('#sort_order');

  /* store values */
  this.list.children('li').each(function(){
    var li = jQuery(this);
    li.data('id',li.attr('title')).attr('title','');
  });
  /* sortables */
  var obj = this;
  this.list.sortable({
    opacity: 0.7,
    update: function(){
      obj.submit();
    }
  });
  this.list.disableSelection();
}

/* worker function */
DragNDropList.prototype.submit = function(){
  var sortOrder = [];
  this.list.children('li').each(function(){
    sortOrder.push(jQuery(this).data('id'));
  });
  this.sortInput.val(sortOrder.join(','));
  this.request();
}

DragNDropList.prototype.request = function(){
  var obj = this;
  jQuery.ajax({
    success: function(data){
      $("#status").text('Saved');
    },
    error: function(){
      $('#status').text('Failed to save sort order').show();
    },
    data: 'sort_order=' + obj.sortInput[0].value,
    dataType: 'json',
    type: 'post',
    url: '/site/update'
  });
};

// init drag-n-drop lists
var list1 = new DragNDropList('#list1');
var list2 = new DragNDropList('#list2');

Google Hosted jQuery

Google provides hosting for many of the most popular JavaScript libraries. I’m a big fan of jQuery so I’m going to show you how to use Google’s hosted version of jQuery and thereby removing resources from your web server and speeding up site performance.

Performance can be increased because your user is going to download the jQuery file from Google’s CDN network and not from your server. Also, it could be even faster if the user visited another website that also uses Google’s hosted jQuery. If that is the case then your user won’t need to download it again and will use the exactly same cached version.

There are two ways to do this.

The fastest and simplest is to link directly to the Google’ hosted jQuery file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The second approach has more features but there is a slight delay while the jsapi loads the correct version of jQuery. If you want the absolute best performance use the first version.

1) Signup to get your own API key

2) Add the following code to your layout:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");

  google.setOnLoadCallback(function() {
    // Put you init code here instead of using $(document).ready()
  });
</script>

You can also specify the latest version of the 1.4 branch:

google.load("jquery", "1.4");