在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排序后删除类？

回答

相关问题