Question

我尝试使用jQuery和jQuery-ui实现primeFaces中的选项列表。

要结合多选和可排序我有一个切换类onClick的函数，并允许用户使用ctrl-Button选择多个元素。

在列表之间进行排序，选择和移动工作正常，但现在我必须使用按钮实现与拖放相同的功能。

现在我的问题是，如果我举起一个项目（使用按钮！），切换不再起作用或仅部分起作用。

有人能帮助我吗？

我为此创建了一个小提琴，但按钮的功能没有被调用，我不知道为什么。

http://jsfiddle.net/p59vJ/14/ 编辑：

使用较少的代码：http://jsfiddle.net/p59vJ/15/

我的代码：

的Javascript / jQuery的：

  var selectedList = new Array();
  var selectedChoice = new Array();
  var selected = new Array();

  jQuery(function() {
      jQuery('#liste, #auswahl').sortable({
          connectWith:".ui-picklist-list",
      });

      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });

  });

  function initMultiselect(){
      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });
  }

  function hasClass(element, cls) {
      var r = new RegExp('\\b' + cls + '\\b');
      return r.test(element.className);
  }



  function moveUp(id){
      for(var i=1; i<document.getElementById(id).getElementsByTagName("li").length; i++){
          if(hasClass(document.getElementById(id).getElementsByTagName("li")[i],"ui-state-highlight")){
              var e1 = document.getElementById(id).getElementsByTagName("li")[i];
              var e2 = document.getElementById(id).getElementsByTagName("li")[i-1];

              if(e1 && e2) { //nodes found
                  var parent = e1. parentNode;
                  var clones = [
                   e1. cloneNode(true),
                   e2. cloneNode(true)
                  ];
              //toggle (replace nodes)
              parent. replaceChild(clones[1], e1);
              parent. replaceChild(clones[0], e2);
              }
          }
      }

      jQuery('#'+id).children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
            jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });    
  }

HTML码：

     <table id="j_idt14:j_idt19" class="ui-picklist ui-widget">
       <tbody>
          <tr>
            <td class="ui-picklist-source-controls">
                <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up" type="button" onClick="moveUp('liste');">
                <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span>
                <span class="ui-button-text">moveUp</span>
                </button>
            </td>
            <td>
              <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">Liste</div>
                <ul class="ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom" id="liste">
                  <li class="ui-picklist-item" id="pick1">Messi - 10</li>
                  <li class="ui-picklist-item" id="pick2">Iniesta - 8</li>
                  <li class="ui-picklist-item" id="pick3">Villa - 7</li>
                  <li class="ui-picklist-item" id="pick4">Alves - 2</li>
                  <li class="ui-picklist-item" id="pick5">Xavi - 6</li>
                  <li class="ui-picklist-item" id="pick6">Puyol - 5</li>
                </ul>
     </td>
       <td>
      </td>
       <td>
          <div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">Auswahl</div>
           <ul class="ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom " id="auswahl">
           <li class="ui-picklist-item " id="choice1">Element 1</li>
            <li class="ui-picklist-item " id="choice2">Element 2</li>
              <li class="ui-picklist-item " id="choice3">Element 3</li>
             <li class="ui-picklist-item " id="choice4">Element 4</li>
          <li class="ui-picklist-item" id="choice5">Element 5</li>
          <li class="ui-picklist-item " id="choice6">Element 6</li>
          <li class="ui-picklist-item " id="choice7">Element 7</li>
          <li class="ui-picklist-item " id="choice8">Element 8</li>

           </ul>
        </td>
        <td class="ui-picklist-target-controls">
           <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up" type="button" onClick="moveUp('auswahl')">
          <span class="ui-button-icon-left ui-icon ui-icon ui-icon-arrow-1-n"></span>
           <span class="ui-button-text">moveUp</span>
          </button>
        </td>
       </tr>
     </tbody>
   </table>

CSS：

.ui-picklist .ui-picklist-list {
height: 200px;
list-style-type: none;
margin: 0;
overflow: auto;
padding: 0;
width: 200px;
}
.ui-picklist .ui-picklist-list li {
margin: 1px;
padding: 2px;
}
.ui-picklist .ui-button {
display: block;
margin-bottom: 0.3em;
margin-left:0.4em;
background: transparent url(../dsv_assets/images/datepicker_button.PNG) no-repeat;
border:none;
}
.ui-picklist .ui-picklist-item {
border: 0 none;
cursor: pointer;
font-weight: inherit;
}
.ui-picklist .ui-picklist-caption {
border-bottom: 1 none;
padding: 4px 10px;
text-align: center;
}
.ui-picklist table {
border-collapse: collapse;
width: 100%;
}
.ui-picklist > tbody {
}

.ui-picklist-item div{
width: 20px;
float: right;
height: 13px;
}

.ui-picklist-caption{
color: black !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header  .ui-state- highlight  {background: highlight; color: white;}

Answer 1

好的，我发现了错误。当我克隆list-elements以将它们向上或向下移动到列表或其他列表时，click事件会丢失，因此我每次移动一个或多个项目后都会初始化它。因为有些列表项只有点击功能，所以当我点击它们并且它们有偶数次点击事件时，看起来点击事件没有被触发，因为该类切换然后切换到同一时刻。

当我拖放它们时，元素没有突出显示的问题是，当按下鼠标按钮时会触发click事件，并且不仅仅是按下鼠标按钮也会松开。

解决方案：移动一个或多个列表项后，我调用一个函数来执行此操作：

      jQuery([all my picklist items]).unbind('mousedown');
      jQuery([all my picklist items]).mousedown( function (eventObject){
           if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
           }
           jQuery(this).toggleClass("ui-state-highlight");
      });

为什么类的切换只是部分地用于少数元素而不总是相同？

1 个答案: