jQuery : Drag and Drop

To, Drag and Drop Image, Div etc. using Jquery !


A) Attach This two JS File into your Page.

      1) http://code.jquery.com/jquery-1.7.2.min.js
      2) https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js

B) Put this Script in you page at bottom

<script type="text/javascript">

jQuery(document).ready(function(){


jQuery(".product img").draggable({

        /* Use that Class or Tag Reference using JQUERY which you want to drag [change  .product img  as per Requirement] */

containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100

});

jQuery("div#slider4").droppable({

        /* Use the Class or Tag Reference using JQUERY where you want to drop draggable thing [change  div#slider4  as                                          per Requirement] */
drop:
function(e, ui)
{

var param = jQuery(ui.draggable).attr('src');
var params = jQuery(ui.draggable).attr('name');
var href = jQuery(ui.draggable).attr('title');

if(jQuery.browser.msie && jQuery.browser.version=='6.0')
{
param = jQuery(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
param = param[1];
}
addlist(param,params,href);
}

});
});

function addlist(param,params,href)
{
jQuery.ajax({
type: "POST",
data: 'img='+param+'&id='+params,
url: "<?php echo Mage::getBaseUrl().'ajax/index/getdata1' ?>",
dataType: 'json',
beforeSend: function(x){jQuery('#ajax-loader').css('visibility','visible'); },
success: function(msg){

var ids = msg.id;
jQuery('#list_item').append(msg.txt);

});
}
}