title: JQuery: Drag and Drop inside a container
body: <p>As i am new to JQuery and JavaScript, i was struggling to create a drag and drop function.</p>
  
  <p>Here i need to drag and drop the icons from one container to another. 
  Once an icon is dropped into right container the icon in left container must be grey scaled and once if icon is drag and dropped from right to left container it should come to normal color from grey scale. 
  I just need to write a onclick function for right container icon that should not be working on left container.</p>
  
  <p>Is there any way to do this. I tried lot of plugins but i failed. </p>
  
  <p>Note: It should not be in HTML5.</p>
  
  <p><img src="https://i.stack.imgur.com/4lHH3.jpg" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;div id="columns"&gt;          
          &lt;ul id="column2" class="column"&gt; 
             &lt;li id="image1"&gt;&lt;img class="widget-head" src="img/addfuel@2x.png" id="1"/&gt;&lt;/li&gt; 
             &lt;li id="image2"&gt;&lt;img class="widget-head" src="img/boatclean@2x.png" id="2"/&gt;&lt;/li&gt; 
             &lt;li id="image3"&gt;&lt;img class="widget-head" src="img/diveservice@2x.png" id="3"/&gt;&lt;/li&gt; 
             &lt;li id="image4"&gt;&lt;img class="widget-head" src="img/fooddrain@2x.png" id="4"/&gt;&lt;/li&gt; 
          &lt;/ul&gt; 
  
          &lt;ul id="column3" class="column"&gt;&lt;/ul&gt; 
  
      &lt;/div&gt; 
  </code></pre>
  
  <p><strong><em>JS</em></strong></p>
  
  <pre><code>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
              }
          }
      },
  
      init : function () {
          this.attachStylesheet('inettuts.js.css');
          this.addWidgetControls();
          this.makeSortable();
      },
  
      getWidgetSettings : function (id) {
          var $ = this.jQuery,
              settings = this.settings;
          return (id&amp;&amp;settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
      },
  
      addWidgetControls : function () {
          var iNettuts = this,
              $ = this.jQuery,
              settings = this.settings;
  
          $(settings.widgetSelector, $(settings.columns)).each(function () {
              var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
              if (thisWidgetSettings.removable) {
                  $('&lt;a href="#" class="remove"&gt;CLOSE&lt;/a&gt;').mousedown(function (e) {
                      e.stopPropagation();    
                  }).click(function () {
                      if(confirm('This widget will be removed, ok?')) {
                          $(this).parents(settings.widgetSelector).animate({
                              opacity: 0    
                          },function () {
                              $(this).wrap('&lt;div/&gt;').parent().slideUp(function () {
                                  $(this).remove();
                              });
                          });
                      }
                      return false;
                  }).appendTo($(settings.handleSelector, this));
              }
  
              if (thisWidgetSettings.editable) {
                  $('&lt;a href="#" class="edit"&gt;EDIT&lt;/a&gt;').mousedown(function (e) {
                      e.stopPropagation();    
                  }).toggle(function () {
                      $(this).css({backgroundPosition: '-66px 0', width: '55px'})
                          .parents(settings.widgetSelector)
                              .find('.edit-box').show().find('input').focus();
                      return false;
                  },function () {
                      $(this).css({backgroundPosition: '', width: ''})
                          .parents(settings.widgetSelector)
                              .find('.edit-box').hide();
                      return false;
                  }).appendTo($(settings.handleSelector,this));
                  $('&lt;div class="edit-box" style="display:none;"/&gt;')
                      .append('&lt;ul&gt;&lt;li class="item"&gt;&lt;label&gt;Change the title?&lt;/label&gt;&lt;input value="' + $('h3',this).text() + '"/&gt;&lt;/li&gt;')
                      .append((function(){
                          var colorList = '&lt;li class="item"&gt;&lt;label&gt;Available colors:&lt;/label&gt;&lt;ul class="colors"&gt;';
                          $(thisWidgetSettings.colorClasses).each(function () {
                              colorList += '&lt;li class="' + this + '"/&gt;';
                          });
                          return colorList + '&lt;/ul&gt;';
                      })())
                      .append('&lt;/ul&gt;')
                      .insertAfter($(settings.handleSelector,this));
              }
  
              if (thisWidgetSettings.collapsible) {
                  $('&lt;a href="#" class="collapse"&gt;COLLAPSE&lt;/a&gt;').mousedown(function (e) {
                      e.stopPropagation();    
                  }).toggle(function () {
                      $(this).css({backgroundPosition: '-38px 0'})
                          .parents(settings.widgetSelector)
                              .find(settings.contentSelector).hide();
                      return false;
                  },function () {
                      $(this).css({backgroundPosition: ''})
                          .parents(settings.widgetSelector)
                              .find(settings.contentSelector).show();
                      return false;
                  }).prependTo($(settings.handleSelector,this));
              }
          });
  
          $('.edit-box').each(function () {
              $('input',this).keyup(function () {
                  $(this).parents(settings.widgetSelector).find('h3').text( $(this).val().length&gt;20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
              });
              $('ul.colors li',this).click(function () {
  
                  var colorStylePattern = /\bcolor-[\w]{1,}\b/,
                      thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
                  if (thisWidgetColorClass) {
                      $(this).parents(settings.widgetSelector)
                          .removeClass(thisWidgetColorClass[0])
                          .addClass($(this).attr('class').match(colorStylePattern)[0]);
                  }
                  return false;
  
              });
          });
  
      },
  
      attachStylesheet : function (href) {
          var $ = this.jQuery;
          return $('&lt;link href="' + href + '" rel="stylesheet" type="text/css" /&gt;').appendTo('head');
      },
  
      makeSortable : function () {
          var iNettuts = this,
              $ = this.jQuery,
              settings = this.settings,
              $sortableItems = (function () {
                  var notSortable = '';
                  $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                      if (!iNettuts.getWidgetSettings(this.id).movable) {
                          if(!this.id) {
                              this.id = 'widget-no-id-' + i;
                          }
                          notSortable += '#' + this.id + ',';
                      }
                  });
                  return $('&gt; li:not(' + notSortable + ')', settings.columns);
              })();
  
          $sortableItems.find(settings.handleSelector).css({
              cursor: 'move'
          }).mousedown(function (e) {
              $sortableItems.css({width:''});
              $(this).parent().css({
                  width: $(this).parent().width() + 'px'
              });
          }).mouseup(function () {
              if(!$(this).parent().hasClass('dragging')) {
                  $(this).parent().css({width:''});
              } else {
                  $(settings.columns).sortable('disable');
              }
          });
  
          $(settings.columns).sortable({
              items: $sortableItems,
              connectWith: $(settings.columns),
              handle: settings.handleSelector,
              placeholder: 'widget-placeholder',
              forcePlaceholderSize: true,
              revert: 300,
              delay: 100,
              opacity: 0.8,
              containment: 'document',
              start: function (e,ui) {
                  $(ui.helper).addClass('dragging');
              },
              stop: function (e,ui) {
                  $(ui.item).css({width:''}).removeClass('dragging');
                  $(settings.columns).sortable('enable');
              }
          });
      }
  
  };
  
  iNettuts.init();
  </code></pre>