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可選 - 不要取消選擇某些元素的點擊字段

回答

相關問題