Add products to cart using drag & drop in magento

I want to add products to cart using Drag & drop. For that I am using jQuery UI Droppable . Code is:-

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
     $(function() {
$( ".category-products" ).accordion();
$( ".product-name" ).draggable({
  appendTo: "body",
  helper: "clone"
});
$( ".block-content ol" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ":not(.ui-sortable-helper)",
  drop: function( event, ui ) {
    $( this ).find( ".placeholder" ).remove();
    $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  }
}).sortable({
  items: "li:not(.placeholder)",
  sort: function() {
    // gets added unintentionally by droppable interacting with sortable
    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
    $( this ).removeClass( "ui-state-default" );
  }
});

});

Using this code products name become droppable to cart but they are not added to cart. I try but don’t able to add product name to cart. Please help me.

Assuming that your product dont have any custom option.

Store your product id as an hidden field within you product list (draggable li)

      <li>Lolcat Shirt
          <input type='hidden' value='2' name='pid' />
      </li>

Then do

  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "> p" )
        .html( "Dropped!" );

    add product to cart
    p_id = ui.draggable.find('input[name="pid"]').val();
    $.get("/path/to/app/checkout/cart/add?qty=1&product=" + p_id)

    return false;
  }

See http://jsfiddle.net/C2Ufk/

You will need to do something similar to remove item