Question

I’ve got a UL of items using jQuery UI that I have drag and drop capable. However, I also need to be able to click on one of the items in the list and trigger off a little routine that adds a header line above one of the “li”s. The problem lies with the click on the drag and drop. I’ve tried to bind the click to a specific region of the li using a span but then I lose the index of the li. Here’s my code, any suggestions would be greatly appreciated:

<script type="text/javascript">
 $(function() {
        var item_positions = $('#ml_organize').sortable('toArray');
  $('#ml_organize').sortable({
      placeholder: 'ui-state-highlight',
            cursor: 'pointer'
  });
  $('#ml_organize').disableSelection();
        $('#org_submit').click(function() {
            var item_positions = $('#ml_organize').sortable('toArray');
        });
        $('#ml_organize li').bind('click', function() {
            var rowNo = $(this).index();
            var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'icon ui-icon ui-icon-minusthick\' title=\'Remove header line\' alt=\'Remove header line\' onClick=\'removeMLRow(" + rowNo + ");\'></span><span class=\'note\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>";
            //alert(rowNo);
            $('#ml_organize li').eq(rowNo).before(newRow);
            $('#hl_text' + rowNo + '').focus(function() {
                $(this).css('background','#DDD');
            });
            $('#hl_text' + rowNo + '').blur(function() {
                $(this).css('background','#FFF');
            });
            $('#hl_text' + rowNo + '').focus();
            // renumber rows after insert
            $('#ml_organize li').slice(rowNo - 1).each(function() {
                var newID = 'li' + ($(this).index() + 1);
                $(this).attr('id',newID);
            });
            var item_positions = $('#ml_organize').sortable('toArray');
            // alert(item_positions);
        });
 });
    function removeMLRow(rowNo) {
        $('#ml_organize li').eq(rowNo).remove();
        // renumber rows after remove
        $('#ml_organize li').slice(rowNo).each(function() {
            var newID = 'li' + ($(this).index() + 1);
            $(this).attr('id',newID);
        });
        var item_positions = $('#ml_organize').sortable('toArray');
        //alert(item_positions);
    }
    $('#org_submit').button();
</script>

And here’s the UL that it needs to manipulate:

<ul id="ml_organize">
   <li id="li1" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li>
    <li id="li2" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li>
    <li id="li3" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li>
    <li id="li4" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li>
    <li id="li5" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">4</span><span class="org_partno">ISS888</span><span class="org_desc">INSUL STRIP FOR BAYS-42" LONG</span></li>
    <li id="li6" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li>
    <li id="li7" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li>
    <li id="li8" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X  24.0"</span></li>
    <li id="li9" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li>
    <li id="li10" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li>
    <li id="li11" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li>
    <li id="li12" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li>
    <li id="li13" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">SPT6224</span><span class="org_desc">SPLIT TUBE 5/8" X 24" GRAY</span></li>
    <li id="li14" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li>
    <li id="li15" class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line"></span><span class="org_qty">1</span><span class="org_partno">T1523-0031-200</span><span class="org_desc">28 PR/24AWG SHLD, AMP 64-PIN FEMALE CONN</span></li>
</ul>

Answer 1

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');
}