1

我尝试使用 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;}
4

1 回答 1

1

好的，我发现了错误。当我克隆列表元素以将它们向上或向下移动列表或移动到另一个列表时，单击事件会丢失，因此我每次移动一个或多个项目后都会对其进行初始化。因为一些列表项的功能不仅仅是点击功能，所以当我点击它们并且它们有偶数个点击事件时，看起来点击事件没有被触发，因为类切换然后切换相同再次的时刻。

当我拖放元素时元素未突出显示的问题是，单击事件仅在按下鼠标按钮时触发，并且不仅在按下时松开。

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

      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");
      });
于 2012-01-12T07:28:02.607 回答