L'interface utilisateur de jQuery Glisser-Déposer fait déclencher le clic lié

Question

J'ai un UL d'éléments utilisant jQuery UI que j'ai drag and drop capable. Cependant, je dois aussi pouvoir cliquer sur l'un des éléments de la liste et déclencher une petite routine qui ajoute une ligne d'en-tête au-dessus de l'un des «li». Le problème réside avec le clic sur le glisser-déposer. J'ai essayé de lier le clic à une région spécifique du li en utilisant un span mais ensuite je perds l'index du li. Voici mon code, toutes les suggestions seraient grandement appréciés:

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

Et voici l'UL qu'il doit manipuler:

<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

Voir si le résout en dessous du problème.

Notez que j'ai aussi essayé de nettoyer un peu le code, mais cela pourrait être beaucoup plus simple. Vous n'avez pas besoin de tous les ID distincts pour chaque LI, puisque vous utilisez index() - je les ai supprimés du JS.

Couple d'autres points:

• Si vous finirez avec des centaines ou des milliers de LIs, vous devez utiliser la délégation de l'événement plutôt que de se lier à cliquer (délégation de l'événement pourrait simplifier ce code supplémentaire de toute façon).
• Pour les éléments gérant les clics, il est généralement préférable/préférable d'utiliser plutôt que. Vous pouvez alors les faire au moins faire quelque chose pour les gens sans 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'); 
}