javascript - 我想将选定的元素从一个列表移动到另一个列表

Question

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>

它应该如图所示。 我无法使用有序列表生成空列表。请帮我。 提前致谢。

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