drag and drop that clones the original

Good evening, I'm not used to jQuery yet, and I'd like to modify the following code so that one element gets cloned when doubleclicked or dragged from #allFacets into #userFacets, but simply gets deleted when doubleclicked in #userFacets... How could it be possible to do so ?

Thanks in advance ! (EDIT : sorry for the time editing my post, I'm not used to this website either...)

JAVASCRIPT

$(function () {
    $('#allFacets, #userFacets').sortable({
        connectWith: 'ul',
        placeholder: 'placeholder',
        delay: 150
    }).disableSelection().dblclick(function (e) {
        var item = e.target;
        if (e.currentTarget.id === 'allFacets') {
            $(item).clone({
                $(item).appendTo($('#userFacets')).fadeIn('slow');
            });
        } else {
            $(item).fadeOut('fast', function () {
                $(item).appendTo($('#allFacets')).fadeIn('slow');
            });
        }
    });
});

CSS :

  .facet-container{
  width: 330px;
  }
  .right {
  float: right;
  }
  .left {
  float: left;
  }
  p {
  clear: both;
  padding-top: 1em;
  }
  .facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
  }
  .facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  }
  .facet-list li.placeholder {
  height: 1.2em
  }
  .facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
  }
  .facet.ui-sortable-helper {
  opacity: 0.5;
  }
  .placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
  }

HTML :

<html>
<head>

<meta charset="UTF-8">

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>

<script>
    window.console = window.console || function(t) {};
    window.open = function(){ console.log('window.open is disabled.'); };
    window.print = function(){ console.log('window.print is disabled.'); };
    // Support hover state for mobile.
    if (false) {
        window.ontouchstart = function(){};
    }
    </script>

  </head>


  <body>

    <div class="facet-container">
    <div class="left">
      <label>All Facets</label>
      <ul id="allFacets" class="facet-list">
        <li class="facet">Facet 2</li>
        <li class="facet">Facet 3</li>
        <li class="facet">Facet 5</li>
        <li class="facet">Facet 1</li>
        <li class="facet">Facet 4</li>
      </ul>
    </div>
    <div class="right">
      <label>User Facets</label>
      <ul id="userFacets" class="facet-list">

      </ul>
    </div>
  </div>
  <p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>

</body>
</html>

Solution

You can use the helper option to display a clone of the item being dragged, and in the receive event callback, manually append a clone of the item being dragged and cancel the sort so that original element will stay in place. jQuery ui will hide the original being dragged if helper option is set to "clone". so if you want to keep the original visible during drag, you can show it inside the start event callback.

Also note that you should use event delegation for binding the doubleclick so that it recognizes the items which are appended in future.

$(function() {
  $('#allFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    start: function(e, ui) {
      ui.item.show(); // force jquery ui to display the original
    }
  });
  $('#userFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    receive: function(e, ui) {
      ui.item.clone().appendTo(this); // append a copy
      ui.sender.sortable("cancel"); // return the original
    }
  }).on("dblclick", "li", function() {
    $(this).remove();
  });
});

.facet-container {
  width: 330px;
}
.right {
  float: right;
}
.left {
  float: left;
}
p {
  clear: both;
  padding-top: 1em;
}
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
}
.facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.facet-list li.placeholder {
  height: 1.2em
}
.facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
}

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="facet-container">
  <div class="left">
    <label>All Facets</label>
    <ul id="allFacets" class="facet-list">
      <li class="facet">Facet 2</li>
      <li class="facet">Facet 3</li>
      <li class="facet">Facet 5</li>
      <li class="facet">Facet 1</li>
      <li class="facet">Facet 4</li>
    </ul>
  </div>
  <div class="right">
    <label>User Facets</label>
    <ul id="userFacets" class="facet-list">

    </ul>
  </div>
</div>
<p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>