Question

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

有没有人知道如何推广这个？

这是我的基本实现：

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

谢谢！

Answer 1

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

$( "#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() - 容器内的evething会导致select / deselect（这不是你想要的）。

jQuery UI Selectable - 单击某个元素时不要取消选择字段

1 个答案: