Я хочу переместить выбранные элементы из одного списка в другой - PullRequest
Новая
       36

Я хочу переместить выбранные элементы из одного списка в другой

0 голосов
/ 10 октября 2018

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

Я хочу переместить выбранные элементы из одного списка в другой.Список генерируется с помощью выбора jquery. введите описание изображения здесь 

$( "#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 Ответ

0 голосов
/ 10 октября 2018

Кажется, вам не хватает JQuery-UI в вашем HTML-файле.И вы должны установить некоторые стили на .ui-selection и .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>
...