title: Drag and Drop multiple select with options
body: <p>I've two multiple select with options. I want drag and drop options from one multiple select element to other.</p>
  
  <p>The problem is i guess multiple select not allow to drag. Now I'm trying to create a new draggable element on click on any option and append it to body. It's working fine. But the problem is I'm not able to start drag my element when i click and start drag on option. I've to again click and start drag my draggable element.</p>
  
  <p>Is there any event to start drag? so that i can trigger on click of option after create new element? So that it feel like my option is dragging.</p>
  
  <p><strong>NOTE: I've to use only multiple select in my case. I can't use jQuery UI sortable or other kinda widget here.</strong></p>
  
  <p><strong>It's what i'm trying to do. It's rough idea now. I'll refactor it after solution</strong></p>
  
  <pre><code>$(document).on('mousedown', 'select option', function(e) {
      var self = $(this);
      var offset = self.offset();
      var draggableDiv = $('&lt;div /&gt;').prop('id', 'draggable').css({
          position: 'absolute',
          left: offset.left,
          top: offset.top,
          width: self.width(),
          height: self.height(),
          cursor: 'default',
          background: '#ff0',
          opacity: 0.5
      }).text(self.text());
      $('body').append(draggableDiv);
  
      draggableDiv.draggable({
          revert: true,
          containment: 'window'
      });
  
      // function to start drag goes here
      draggableDiv.trigger('dragstart');
  });
  </code></pre>