Question

I’ve two multiple select with options. I want drag and drop options from one multiple select element to other.

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.

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.

NOTE: I’ve to use only multiple select in my case. I can’t use jQuery UI sortable or other kinda widget here.

It’s what i’m trying to do. It’s rough idea now. I’ll refactor it after solution

$(document).on('mousedown', 'select option', function(e) {
    var self = $(this);
    var offset = self.offset();
    var draggableDiv = $('<div />').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');
});

Answer 1

I changed target of event, before pass it to draggable, also fixed position (see comments)

$(document).on('mousedown', 'select option', function(e) {
    var self = $(this);
    var offset = self.offset();
    var draggableDiv = $('<div />').prop('id', 'draggable').css({
        position: 'absolute',
        left: e.pageX,   // <-HERE
        top:  e.pageY,
        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'
    });
    e.target=draggableDiv.get(0);  // <-HERE
    // function to start drag goes here
    draggableDiv.trigger(e);
});

demo

other demo – looks little more accurate for me