title: How to pass data from a draggable item to a connected sortable list
body: <p>Please take a look at <a href="http://jsfiddle.net/arasbm/ghMaP/3/" rel="nofollow">this jsFiddle.</a> </p>
  
  <p>What I am trying to achieve is to allow user to drag one of the three items on top and drop them into the sorted list. I have added a custom helper which is a placeholder right now and will be used for showing a preview of what that item will look like.</p>
  
  <p>For the sake of discussion lets say the three draggable elements are <em>source items</em>, and what ends up in the sortable list is <em>target items</em>. What I am having difficulty is passing the right content to the <code>stop</code> function in the sortable list and inserting that content into the list instead of default clone of the source item. I also want to pass along some additional information with the source item. For example I want to know in the stop function if the element came from one of draggable source items or it is just one of the target items that is being reordered.</p>
  
  <p>If you check the console you can see some of the unsuccessful attempts that I have made. I tried setting values in <code>event.data</code> but I get <code>TypeError: event.data is null</code> in the start and stop functions of the sortable list. So I think I am missing something here.</p>
  
  <p>To reiterate my question, there are two related issues I am facing:</p>
  
  <ol>
  <li>How do I pass some data from when source item is being dragged to when it is dropped inside the sortable list which seems to trigger <code>start</code> and <code>stop</code> function of the sortable list?</li>
  <li>How do I insert a custom div inside the list instead of the default clone of the source item?  </li>
  </ol>
  
  <p>Any help will be appreciated.</p>