jQuery UI Selectable-单击某些元素时不要取消选择字段 [英] jQuery UI Selectable - do not unselect fields on click of certain element

问题描述

我目前正在使用jQuery UI Selectable构建文档编辑器.在编辑器中，您可以添加多个可拖动字段.如果选择了一个或多个字段，则会在顶部显示一个选项菜单，其中显示了一些可单击的选项(例如，粗体，斜体等).问题是，单击此菜单后，所有字段都将自动取消选择.

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?

这是我最基本的实现:

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

谢谢！

推荐答案

您应该在ul元素而不是容器元素上设置selectable:

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>

如果您在容器上设置了selectable()-在该容器内的任何东西都可能导致选择/取消选择(这不是您要查找的内容).

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

这篇关于jQuery UI Selectable-单击某些元素时不要取消选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！