Question

我使用jQuery UI获得了UL项目，我可以拖放。但是，我还需要能够单击列表中的一个项目并触发一个小程序，在“li”之一上添加一个标题行。问题在于点击拖放。我试图使用span将点击绑定到li的特定区域但是我丢失了li的索引。这是我的代码，任何建议将不胜感激：

<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>

这是它需要操纵的UL：

<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

看看下面是否解决了这个问题。

请注意，我尝试稍微清理代码，但它仍然可以更简单。您不需要每个LI的所有单独ID，因为您使用的是index（） - 我将它从JS中删除。

其他几点：

如果最终会有数百或数千个LI，您应该使用事件委派而不是绑定到click（事件委托可能会进一步简化此代码）。
对于处理点击的元素，通常使用而不是更好/更好。然后，你至少可以让他们为没有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');
}

jQuery UI Drag and Drop导致绑定点击触发

1 个答案: