drag children & drop to parent and still access the children

Question

I'm trying to do a list of items that can be dragged and dropped over (and under).

I'm successfull to drop an element into its parent, and to drop a child to its newly moved element.

but then what I can't do is "accessing" a child. For example a double click on an li element should open a box with that element's name. Which I can't, it's always the parent that triggers the event.

I've tried to play with zIndex but it does not solution.

See my fiddle it will be more explicit. http://jsfiddle.net/WeeHT/

thank you!

function make_draggable() {
$('.account_line').draggable({
    containment: '#COA_Table',
    cursor: 'move',
    snap: '#COA_Table',
    helper: 'clone'
})
}

function make_droppable() {
$('.account_line').droppable({
    accept: '.account_line',
    tolerance: 'pointer',
    hoverClass: "account_line_drop-hover",
    zIndex: zindexlevel++,
    drop: function (e, ui) {
        // if this is first child we append a new ul
        if ($(this).children('ul').length == 0) {
            $(this).append('<ul></ul>')
        }

        $(this).children('ul').append(ui.draggable)
        $(this).css({
            backgroundColor: 'white'
        })
        $(this).css({
            zIndex: zindexlevel++
        })
    },
    over: function () {
        $(this).css({
            backgroundColor: "grey"
        });
    },
    out: function () {
        $(this).css({
            backgroundColor: 'white'
        })
    }

})
}

Answer 1

It's because the event is bubbling up to the DOM tree.

So you have to add next line at the beginning of your double click event handler :

e.stopPropagation();

Then it will look like this in your code :

function start_edit() {
    $('.account_line').dblclick(function (e) {
        e.stopPropagation();
        var account_name = $(this).children('p').first().html()
        $('#account_edit').css({
            display: 'block'
        });
        $('#account_edit').children('#account_name_to_edit').html(account_name);
    })
}

jQuery docs

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.