jQuery可手动排序触发sortstop事件

时间:2012-09-17 20:14:22

标签: jquery-ui jquery jquery-ui-sortable

是否可以手动触发jQuery可排序控件的sortstop事件?

我试过$(selector).trigger('sortstop')但似乎没有任何事情发生。

一些相关的HTML:

<div data-zone="name">
    <div class="section disabled" id="section-1">Some section template 1</div>
    <div class="section" id="section-2">Some section template 2</div>
    <div class="section" id="section-3">Some section template 3</div>
</div>

<button class="trigger-button">Trigger stop</button>

和一些JavaScript:

$("[data-zone]").sortable({
    placeholder: 'ui-state-highlight',
    cancel : ".section.disabled",
    stop: function(){
       console.log('sort-stopped');        
    }
})

$(".trigger-button").click(function(){
    console.log('trigger-button clicked');
    var $zone = $('[data-zone]');
    console.log($zone);
    $zone.trigger('sortstop');
});

JsFiddle问题。

1 个答案:

答案 0 :(得分:0)

jQuery UI使用事件来通知你的代码他们的代码发生了什么,而不是相反。

您应该寻找可用于控制可排序对象方法,而不是尝试通过触发事件来控制ui元素:

// Are you looking for this?
$( ".selector" ).sortable( "cancel" );

// Or this?
$( ".selector" ).sortable( "enable" );
$( ".selector" ).sortable( "disable" );

也没有“sortstop”事件。有一个“停止”事件和一个“beforeStop”事件,在排序完成或即将完成时可触发排序,但这些事件由可排序对象发出,而不是由可排序对象读取以执行操作。

如果您真正想要的是倾听这些事件以便您可以执行某些操作,那么这就是您可能想要做的事情:

$("[data-zone]").on('stop', function(evt, ui) {
    // sortable has notified that it has stopped, do stuff here
});

可以在jQuery UI文档中找到有关可排序的更多信息:

http://api.jqueryui.com/sortable/

此外,这是github上的sortable.js源文件

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.sortable.js