title: How to drag and drop item from one list to another without it remove from first list?
body: <p>I am trying to create a list that in the first list items should be fixed and then on the second list, you should able to drag and drop the first item list and you should able to rearrange them.</p>
  
  <p>I found a <a href="http://farhadi.ir/projects/html5sortable" rel="nofollow noreferrer">useful link</a> and I created my code. My problem is that when I am drag and drop from the first list to second list the item will remove from the first list.</p>
  
  <p>Since I am new in Javascript, I am seeking your help in how to disable disappearing the item from list 1 or regenerate it as shown in the picture.
  Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/M5raF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M5raF.jpg" alt="enter image description here"></a></p>
  
  <p>my HTML file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;HTML5 Sortable jQuery Plugin&lt;/title&gt;
      &lt;style&gt;
          header, section {
              display: block;
          }
          body {
              font-family: 'Droid Serif';
          }
          h1, h2 {
              text-align: center;
              font-weight: normal;
          }
          #features {
              margin: auto;
              width: 460px;
              font-size: 0.9em;
          }
          .connected, .sortable, .exclude, .handles {
              margin: auto;
              padding: 0;
              width: 310px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
          }
          .sortable.grid {
              overflow: hidden;
          }
          .connected li, .sortable li, .exclude li, .handles li {
              list-style: none;
              border: 1px solid #CCC;
              background: #F6F6F6;
              font-family: "Tahoma";
              color: #1C94C4;
              margin: 5px;
              padding: 5px;
              height: 22px;
          }
          .handles span {
              cursor: move;
          }
          li.disabled {
              opacity: 0.5;
          }
          .sortable.grid li {
              line-height: 80px;
              float: left;
              width: 80px;
              height: 80px;
              text-align: center;
          }
          li.highlight {
              background: #FEE25F;
          }
          #connected {
              width: 440px;
              overflow: hidden;
              margin: auto;
          }
          .connected {
              float: left;
              width: 200px;
          }
          .connected.no2 {
              float: right;
          }
          li.sortable-placeholder {
              border: 1px dashed #CCC;
              background: none;
          }
      &lt;/style&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;HTML5 Sortable jQuery Plugin&lt;/h1&gt;
      &lt;/header&gt;
      &lt;section id="connected" &gt;
          &lt;h2&gt;Connected Sortable Lists&lt;/h2&gt;
          &lt;ul class="connected list" &gt;
              &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li &gt;Item 2&lt;/li&gt;
              &lt;li &gt;Item 3&lt;/li&gt;
              &lt;li&gt;Item 4&lt;/li&gt;
              &lt;li&gt;Item 5&lt;/li&gt;
              &lt;li &gt;Item 6&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="connected list no2"&gt;
              &lt;li class="highlight"&gt;Item 1&lt;/li&gt;
              &lt;li class="highlight"&gt;Item 2&lt;/li&gt;
              &lt;li class="highlight"&gt;Item 3&lt;/li&gt;
              &lt;li class="highlight"&gt;Item 4&lt;/li&gt;
              &lt;li class="highlight"&gt;Item 5&lt;/li&gt;
              &lt;li class="highlight"&gt;Item 6&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
      &lt;a href="http://github.com/farhadi/html5sortable"&gt;&lt;img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/edc6dae7a1079163caf7f17c60495bbb6d027c93/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"&gt;&lt;/a&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.sortable.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function() {
              $('.connected').sortable({
                  connectWith: '.connected'
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript file:</p>
  
  <pre><code>/*
   * HTML5 Sortable jQuery Plugin
   * http://farhadi.ir/projects/html5sortable
   * 
   * Copyright 2012, Ali Farhadi
   * Released under the MIT license.
   */
  (function($) {
  var dragging, placeholders = $();
  $.fn.sortable = function(options) {
      var method = String(options);
      options = $.extend({
          connectWith: false
      }, options);
      return this.each(function() {
          if (/^enable|disable|destroy$/.test(method)) {
              var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
              if (method == 'destroy') {
                  items.add(this).removeData('connectWith items')
                      .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
              }
              return;
          }
  
          var isHandle, index, items = $(this).children(options.items);
          var placeholder = $('&lt;' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder"&gt;');
          items.find(options.handle).mousedown(function() {
              isHandle = true;
          }).mouseup(function() {
              isHandle = false;
          });
          $(this).data('items', options.items)
          placeholders = placeholders.add(placeholder);
          if (options.connectWith) {
              $(options.connectWith).add(this).data('connectWith', options.connectWith);
          }
          items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
              if (options.handle &amp;&amp; !isHandle) {
                  return false;
              }
              isHandle = false;
              var dt = e.originalEvent.dataTransfer;
              dt.effectAllowed = 'move';
              dt.setData('Text', 'dummy');
              index = (dragging = $(this)).addClass('sortable-dragging').index();
          }).on('dragend.h5s', function() {
              dragging.removeClass('sortable-dragging').show();
              placeholders.detach();
              if (index != dragging.index()) {
                  items.parent().trigger('sortupdate', {item: dragging});
              }
              dragging = null;
          }).not('a[href], img').on('selectstart.h5s', function() {
              this.dragDrop &amp;&amp; this.dragDrop();
              return false;
          }).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
              if (!items.is(dragging) &amp;&amp; options.connectWith !== $(dragging).parent().data('connectWith')) {
                  return true;
              }
              if (e.type == 'drop') {
                  e.stopPropagation();
                  placeholders.filter(':visible').after(dragging);
                  return false;
              }
              e.preventDefault();
              e.originalEvent.dataTransfer.dropEffect = 'move';
              if (items.is(this)) {
                  if (options.forcePlaceholderSize) {
                      placeholder.height(dragging.outerHeight());
                  }
                  dragging.hide();
                  $(this)[placeholder.index() &lt; $(this).index() ? 'after' : 'before'](placeholder);
                  placeholders.not(placeholder).detach();
              } else if (!placeholders.is(this) &amp;&amp; !$(this).children(options.items).length) {
                  placeholders.detach();
                  $(this).append(placeholder);
              }
              return false;
          });
      });
  };
  })(jQuery);
  </code></pre>