jQuery UI可选 - 不要取消选择某些元素的点击字段

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

有没有人有关于如何推广这个想法？

这是我非常基本的实现：

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

谢谢！

来源

2016-10-04 Frank

添加一个工作示例（jsfiddle/snippet） – Dekel

@Dekel：https：//jsfiddle.net/aaa7sun8/29/ - 这里有一个！ – Frank

@Dekel：我希望在单击链接“NO DESELECT”时不要取消选择元素 – Frank

应设置ul元素上的选择，而不是容器元素上：

$("#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会导致选择/取消选择（这不是你正在寻找的）。

来源

2016-10-04 13:57:16 Dekel

jQuery UI可选 - 不要取消选择某些元素的点击字段

回答

相关问题