title: Drag and drop with jquery, button drag and div drop
body: <p>I want to implement a solution with jQuery where a button can be dragged to a certain div element. When it gets dropped into that div, it should have customized html. </p>
  
  <p>I found one example which is on jsfiddle, but unfortunate SO does not provide linking to jsfiddle. I am pasting all code here:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="left-pane"&gt;
     &lt;li&gt;&lt;img src="https://www.google.com/images/srpr/logo3w.png" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="https://www.google.com/images/srpr/logo3w.png" /&gt;&lt;/li&gt;
     &lt;li&gt;&lt;img src="https://www.google.com/images/srpr/logo3w.png" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="right-pane"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#left-pane
  {
      border: 1px solid black;
      min-width: 100px;
      min-height: 100px;
  }
  
  #right-pane
  {
      border: 1px solid black;
      min-width: 100px;
      min-height: 100px;
  }
  </code></pre>
  
  <p>JavaScript / jQuery</p>
  
  <pre><code>$("#left-pane li").draggable({
      containment: '#gbox',
      cursor: 'move',
      helper: 'clone',
      scroll: false,
      connectToSortable: '#right-pane',
      appendTo: '#right-pane',
      start: function () {},
      stop: function (event, ui) {}
  }).mousedown(function () {});
  
  $("#right-pane").sortable({
      sort: function () {},
      placeholder: 'ui-state-highlight',
      receive: function () {},
      update: function (event, ui) {}
  });
  
  $("#right-pane li").live('dblclick', function () {
      $(this).remove();
  })
  
  $("#right-pane").droppable({
      accept: "#left-pane li",
      accept: ":not(.ui-sortable-helper)",
      drop: function (event, ui) {
          if ($(ui.draggable).find('.single-item').length == 0)
          {
              $(ui.draggable).append("&lt;div class='single-item'&gt;&lt;input type='text' class='item-title' /&gt;&lt;br /&gt;&lt;textarea class='item-text'&gt;&lt;/textarea&gt;&lt;/div&gt;");
          }
      }
  });
  
  $("#left-pane").droppable({
      accept: "#right-pane li",
      drop: function (event, ui) {}
  });
  
  $("ul, li").disableSelection();
  </code></pre>
  
  <p>I want something similar to the above but I want to change the image into a certain button and rather UI element, can it be changed to normal div?</p>
  
  <p>Could anyone play with this fiddle and provide me a simple drag and drop solution?</p>
  
  <p>Thanks in advance.</p>