在jQuery UI排序後刪除類？

我有兩個連接的jQuery UI排序列表。我試圖在刪除selected類之後立即刪除它。所以如果我從左邊的列表中刪除一個項目到右邊的列表中，selected類應該被刪除，所以它不會被突出顯示。在jQuery UI排序後刪除類？

我試過在stop, beforeStop, update, out裏面放置$('ul').find('li.selected').removeClass('selected');可排序的方法，但是它們都沒有被刪除掉。

我試過的其他一些東西是在stop方法裏面添加info.item.removeClass('selected')，但它什麼也沒做。我錯過了什麼？

下面是整個代碼。

$("ul").on('click', 'li', function (e) { 
    if (e.ctrlKey || e.metaKey) { 
     $(this).toggleClass("selected"); 
    } else { 
     $(this).addClass("selected").siblings().removeClass('selected'); 
    } 
}).sortable({ 
    connectWith: "ul", 
    delay: 150, //Needed to prevent accidental drag when trying to select 
    revert: 0, 
    helper: function (e, item) { 
     var helper = $('<li/>'); 
     if (!item.hasClass('selected')) { 
      item.addClass('selected').siblings().removeClass('selected'); 
     } 
     var elements = item.parent().children('.selected').clone(); 
     item.data('multidrag', elements).siblings('.selected').remove(); 
     return helper.append(elements); 
    }, 
    stop: function (e, info) { 
     $('ul').find('li.selected').removeClass('selected'); 
     info.item.after(info.item.data('multidrag')).remove(); 
    } 

});

HTML：

<p>Multi-select Drag</p> 
<p> 
    <kbd>Click</kbd> to select individual items<br /> 
    <kbd>Ctrl + Click</kbd> to select multiple items 
</p> 
<br /> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 
<ul> 
    <li>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
</ul>

來源

2015-09-16 Yamaha32088

的問題是，當stop被稱爲li.selected元素仍然被拖動，所以它實際上並不是ul元素的子元素。爲了解決這個問題，引用它在事件對象：

$(e.toElement).removeClass('selected');

爲了處理multidrag（取消選擇所有元素完成拖動多個元件時）：

info.item.data("multidrag").removeClass('selected');

來源

2015-09-16 20:46:09 tcooc

謝謝你這個作品，我比定時器解決方案更喜歡它。 – Yamaha32088

我剛剛注意到一個問題，但我沒有提到。如果我選擇多個項目，它不會刪除所有的類，它只會刪除一個類。 – Yamaha32088

我又看了一下，實際上有一個更簡單的方法來處理multidrag，只要做'info.item.data（「multidrag」）。removeClass（'selected'）;' – tcooc

刪除的setTimeout（）函數內的 '選擇' 類。

請參閱下面的代碼，

http://jsfiddle.net/bb4nkpyp/3/

stop: function (e, info) {  
     setTimeout(function(){ $('ul').find('li.selected').removeClass('selected'); }, 10); 

     info.item.after(info.item.data('multidrag')).remove(); 
    }

來源

2015-09-16 20:41:21

感謝這樣做的伎倆，我曾想過這一點。我猶豫不決，因爲我不確定是否會出現因某種原因未被移除的邊緣案例。 – Yamaha32088

檢查此http://jsfiddle.net/hjyv9yv2/1/

var lastSelected = 0, list; 
$("ul").on('click', 'li', function (e) { 
list = $(this).parent(); 
if (lastSelected !== list.index()){ 
    $('ul li').removeClass('selected'); 
} 
if (e.ctrlKey || e.metaKey) { 
    $(this).toggleClass("selected"); 
} else { 
    $(this).addClass("selected").siblings().removeClass('selected'); 
} 
lastSelected = list.index();

} ）。

如果用戶點擊另一個列表，刪除「選擇」類名這兩個列表中

來源

2015-09-16 21:03:05 SebCar

在jQuery UI排序後刪除類？

回答

相關問題