ansaurus

Question

jQuery UI Drag and Drop causes bound click to trigger

Answer 1

A:

See if the below solves the problem.

Note that I tried to clean up the code a bit as well, but it could still be a lot simpler. You don't need all the separate IDs for each LI, since you are using index() -- I removed them from the JS.

Couple of other points:

If you will end up with hundreds or thousands of LIs, you should use event delegation rather than binding to click (event delegation might simplify this code further anyway).
For elements handling clicks, it's usually nicer/better to use rather than . You can then at least have them do something for people without JavaScript.

var mlo, item_positions, numAdded;
var disableAdd = false;
$(function() {
    mlo = $('#ml_organize');
    mlo
        .sortable({
            placeholder: 'ui-state-highlight',
            cursor: 'pointer',
            start: function() {
                disableAdd = true;
            },
            stop: function() {
                setTimeout('disableAdd = false', 1000);
            }
        })
        .disableSelection();
        .find('li')
            .click(addMlRow);

    item_positions = mlo.sortable('toArray');

    $('#org_submit')
        .click(function() {
            item_positions = mlo.sortable('toArray');
        })
        .button();
});

function addMlRow() {
    if(disableAdd) return false;
    var that = $(this);
    var rowNo = that.index();
    numAdded++;
    $('<li id="new' + numAdded + '" class="ui-state-default"><span class="icon ui-icon ui-icon-minusthick" title="Remove header line"></span><span class="note">HL</span><input class="header_line" maxlength="75" type="text" name="hl_text[' + rowNo + ']" id="hl_text' + rowNo + '" /></li>')
        .insertBefore(that)
        .find('span.ui-icon-minusthick')
            .click(function() {
                $(this).parent().remove();
                item_positions = mlo.sortable('toArray');
            })
        .end()

        .find('input')
            .focus(function() {
                $(this).css('background','#DDD');
            })
            .blur(function() {
                $(this).css('background','#FFF');
            })
            .focus();

    item_positions = mlo.sortable('toArray');
}

Jhong 2010-08-10 15:52:23

BTW, I realise that the sortable('toArray') is useless now without the IDs, but in your example above, they are useless anyway, as you were renumbering the IDs to be consecutive, and then calling toArray. So functionally there's not much difference. If you can share a bit more about what you want to record, I can help.

Jhong 2010-08-10 16:16:18

I need to pass the array to an AJAX script so that the order can be saved and the "HEADER" lines (AddMLRow) can be placed in the correct positions in a db that includes the entire list of items. Does that clear it up at all?

DevlshOne 2010-08-10 18:42:58

BTW, I have exactly the same problem with your version. Although I do appreciate the clean-up and organization. As soon as I drop one of the li's, a header line appears above it. I'm sure it has to do with the fact that I click on the item I am dragging.

DevlshOne 2010-08-10 18:48:49

And I have no idea what event delegation is. I've only been using jQuery for 6 months and jQuery UI for a month.

DevlshOne 2010-08-10 18:56:59

OK, I edited it a little --I disabled the adding function until 1 second after the sort has completed. See if it works. I also added IDs back to the newly-added elements. Not sure you need to renumber the IDs though, you should get the ajax receiver to sort through them if you can.

Jhong 2010-08-11 01:26:11

The disable helps the appearance of the new row, THANKS!!!! However, I'm not quite syre what you mean by getting the AJAX receiver to do the renumbering without a proper array. I've decided to set the IDs as an array called pos[], that I think will help with that process. I'll let you know.

DevlshOne 2010-08-11 15:27:22

ansaurus

tags:

views:

answers:

jQuery UI Drag and Drop causes bound click to trigger

related questions