title: Drag item onto specific position within sortable
body: <p>I have two containers that have multiple items inside. The first contains some icons, that represents the elements that can be inserted into the list. The second container is the actual list and the elements are completely different (from the HTML-structure point of view). It's kinda "Drag an item onto the second list to create this content type".</p>
  
  <p>It works fine like this:</p>
  
  <pre><code>this.templates.draggable({ revert: true });
  this.content.droppable({
      drop: function(event, ui) {
          // create element for this list
          // prepend item to the list
      }
  });
  </code></pre>
  
  <p>The problem is, that I can only prepend or append the element. So it's irrelevant where the user drops it. But actually the new element should be created between the elements where it was dropped.</p>
  
  <p>So I tried this (without the <code>drop</code>-callback from above):</p>
  
  <pre><code>this.templates.draggable({
      revert: true,
      helper: 'clone',
      connectToSortable: '#idofcontainer'
  });
  </code></pre>
  
  <p>This works nearly fine, but it clones the icon. So I have no idea how to stop this behavior and create the new element instead.</p>
  
  <p>So, here's a screenshot, to show what I mean: When the icon is dropped, it should revert to the top list and a new "grey container" should be created at the current position.</p>
  
  <p><img src="https://i.stack.imgur.com/g3h1G.png" alt="example"></p>