Frank Frank - 2 months ago 14
jQuery Question

jQuery UI Selectable - do not unselect fields on click of certain element

I'm currently building a document editor making use of jQuery UI Selectable. In the editor you can add multiple draggable fields. If one or multiple fields are selected, an options menu at the top appears, which shows a few clickable options (e.g. bold, italic, etc.). The problem is that when this menu is clicked, all fields are deselected automatically.

Does anybody have an idea about how to prvenet this?

Here's my very basic implementation:

$("section.window").selectable({filter: "li.draggable"});


Thanks!

Answer

You should set the selectable on the ul element and not on the container element:

$( "#selezionabile" ).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: 50%;}
ul li {padding: 0.4em; margin: 2em; cursor: pointer; font-size: 0.8em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="contianer">
  <a style="display: block; background: #ffc" href="javascript:void(0)">NO DESELECT</a>
  <ul id="selezionabile" 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>

If you set the selectable() on the container - evething inside that container can cause the select/deselect (and this is not what you are looking for).