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

Question

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!

@Dekel: I would like the elements not to be deselected when clicking on the link "NO DESELECT" — Frank
– Frank, Commented Oct 4, 2016 at 13:44

Dekel · Accepted Answer · 2016-10-04 13:57:16Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related