jQuery UI Drag and Drop вызывает связанный щелчок, чтобы вызвать - PullRequest
Новая
       8

jQuery UI Drag and Drop вызывает связанный щелчок, чтобы вызвать

2 голосов
/ 10 августа 2010

У меня есть UL элементов, использующих пользовательский интерфейс jQuery, которые я могу перетаскивать. Однако мне также нужно иметь возможность щелкнуть по одному из элементов в списке и запустить небольшую процедуру, которая добавляет строку заголовка над одним из «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>

1 Ответ

0 голосов
/ 10 августа 2010

Проверьте, решает ли проблема ниже.

Обратите внимание, что я тоже пытался немного очистить код, но он все еще может быть намного проще. Вам не нужны все отдельные идентификаторы для каждого LI, так как вы используете index () - я удалил их из JS.

Пара других баллов:

  • Если у вас появятся сотни или тысячи LI, вам следует использовать делегирование событий вместо привязки к щелчку (делегирование событий может в любом случае упростить этот код).
  • Для элементов, обрабатывающих клики, обычно лучше / лучше использовать, чем. Тогда вы можете, по крайней мере, заставить их что-то сделать для людей без 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');
}
...