15

我有这个小插件，它会导致一个元素脉动三次，调用 .blink()。通过 jQuery .sortable(); 拖放后，我试图让它在 LI 元素上工作。但它似乎在这种情况下不起作用。

$(function() {
$( "#sortable" ).sortable().blink("update-value", 3, 350);
$( "#sortable" ).disableSelection();
});

闪烁代码

$.fn.blink = function (cls, times, delay) {
var $self = this.removeClass(cls);
clearTimeout($.fn.blink.handler);
! function animate(times) {
    if (times) {
        $self.toggleClass(cls);
        $.fn.blink.handler = setTimeout(function () {
            animate(times - 1);
        }, delay);
    }
}(times * 2);
return this;
};
4

3 回答 3

47

如果您正在使用 jQueryUI 可排序插件，并且如果您想要制作一个已拖放（排序）的闪烁元素，那么您应该使用可排序 API 中已经可用的回调：

当你配置你的 sortable 时，你可以给 change 事件一个回调：

$( ".selector" ).sortable({
    change: function( event, ui ) {}
});

API 说：“此事件在排序期间触发，但仅在 DOM 位置发生更改时触发”

您还可以为更新事件提供回调：

$( ".selector" ).sortable({
    update: function( event, ui ) {}
});

API 说：“当用户停止排序并且 DOM 位置发生变化时触发此事件”

在您的情况下，您应该使用更新回调并向您的元素调用 blink 方法。

注意：元素拖放应该在ui对象中可用，使用console.debug检查内容ui

于 2013-02-11T21:30:48.407 回答
1

您需要像这样使用更新事件：

    $( "#sortable" ).sortable({
       update: function( event, ui ) {
       var data = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
       $.post( "url",{ 'data[]': data});
   }});

或者像这样获取数组数据：

var data = $("#sortable").sortable( "toArray" );

见文件

于 2020-10-03T10:20:39.520 回答
0

对于那些有问题的人，我使用“停止”而不是更改或更新。当我使用更新时，它在删除项目之前运行，所以当我访问 dom 获取订单时，它没有更新它。当我使用更改时，它会随机触发中间拖动。我只能通过使用 stop: function( event, ui ) {} 让它工作

于 2019-12-29T01:25:04.513 回答