CODEWITHSUNDEEP
jqueryjquery-ui
Frank
Frank

Reputation: 624

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!

Upvotes: 0

Views: 806

Answers (1)

Dekel
Dekel

Reputation: 62536

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).

Upvotes: 1

Related Questions