jquery-ui - jQuery 可手动排序 触发 sortstop 事件

Question

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

我已尝试$(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的问题。

Answer 1

jQuery UI 使用事件来通知您的代码其代码发生了某些情况，而不是相反。

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

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

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

也没有“sortstop”事件。当排序完成或即将完成时，可排序会触发“stop”事件和“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