我想将选定的项目从一个列表移动到另一个

Posted 2023-05-07

【中文标题】我想将选定的项目从一个列表移动到另一个

【英文标题】：I want to move selected items from one list to another

【发布时间】：2019-03-15 14:59:55

【问题描述】：

https://jsfiddle.net/ritesh26/d5mg03y6/22/

我想将所选项目从一个列表移动到另一个列表。列表是使用jquery selectable生成的。enter image description here

$( "#selection" ).selectable(
    selected: function( e, ui ) 
        if ($( ui.selected ).hasClass( "ui-state-highlight" )) 
            $( ui.selected ).removeClass( "ui-state-highlight" );
         else 
            $( ui.selected ).addClass( "ui-state-highlight" );
        
    ,    
    unselected: function( e, ui ) 
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    
);

ul margin: 0; padding: 0; list-style-type: none; width: 20%;
ul li padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;
.actionButtons
  float: left;

#selection-right
  float: right;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selection" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Elemento 1</li>
    <li class="ui-widget-content ui-corner-all">Elemento 2</li>
    <li class="ui-widget-content ui-corner-all">Elemento 3</li>
    <li class="ui-widget-content ui-corner-all">Elemento 4</li>
    <li class="ui-widget-content ui-corner-all">Elemento 5</li>
    <li class="ui-widget-content ui-corner-all">Elemento 6</li>
    <li class="ui-widget-content ui-corner-all">Elemento 7</li>
</ul>
<div class="actionButtons">
    <div class="action">														
      <a class=" button" href="#">&gt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&gt;&gt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&lt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&lt;&lt;</a>						
    </div>
  </div>
<div>
<ul id="selection-right" class="ui-widget">
    
</ul>

它应该看起来像在图片中。 我无法使用有序列表生成空列表。请帮我。 提前致谢。

【参考方案1】：

您的 html 文件中似乎缺少 JQuery-UI。并且你应该在 .ui-selecting 和 .ui-selected 上设置一些样式来区别于非选中元素。

$( "#selectable" ).selectable(
    selected: function( e, ui ) 
        if ($( ui.selected ).hasClass( "ui-state-highlight" )) 
            $( ui.selected ).removeClass( "ui-state-highlight" );
         else 
            $( ui.selected ).addClass( "ui-state-highlight" );
        
    ,    
    unselected: function( e, ui ) 
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    
);

ul margin: 0; padding: 0; list-style-type: none; width: 20%;
ul li padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;
.actionButtons
  float: left;

#selection-right
  float: right;


  #selectable .ui-selecting  background: red; 
  #selectable .ui-selected  background: blue; color: white; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="selectable" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Elemento 1</li>
    <li class="ui-widget-content ui-corner-all">Elemento 2</li>
    <li class="ui-widget-content ui-corner-all">Elemento 3</li>
    <li class="ui-widget-content ui-corner-all">Elemento 4</li>
    <li class="ui-widget-content ui-corner-all">Elemento 5</li>
    <li class="ui-widget-content ui-corner-all">Elemento 6</li>
    <li class="ui-widget-content ui-corner-all">Elemento 7</li>
</ul>
<div class="actionButtons">
    <div class="action">														
      <a class=" button" href="#">&gt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&gt;&gt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&lt;</a>						
    </div>
    <div class="action">														
      <a class=" button" href="#">&lt;&lt;</a>						
    </div>
  </div>
<div>
<ul id="selection-right" class="ui-widget">
    
</ul>

【讨论】：

知道了。感谢您的帮助

如果我的回答能解决你的问题，请标记为。通过将此视为已回答的问题，它可能会帮助其他遇到相同问题的人。