javascriptjqueryhtmlcssjquery-ui-selectable

I want to move selected items from one list to another

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

I want to move selected items from one list to another. The list is generated using 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>

It should look like in the picture. I'm not able to generate an empty list using ordered list. Please help me. Thanks in advance.

Solution

  • It seems like you are missing JQuery-UI in your HTML file. And you should set some styles on .ui-selecting and .ui-selected to differ it from non selected elements.

    $( "#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>