如何在jQuery Sortable折叠标题上实现一个按钮 [英] How to implement a button on a jQuery Sortable accordion header

问题描述

我一直在为我的网站工作一个jQuery自定义可折叠手风琴。实现的下一个阶段是可排序手风琴的每个标题上的按钮，它将从jQuery可排序手风琴中删除节可扩展列表。

I've been working on a jQuery custom sortable accordion for my website. The next stage to implement is a button on each header of the sortable accordion which will delete the section expandable list from the jQuery sortable accordion.

我有代码可以使用，但我似乎无法覆盖的标题上的按钮，而不是标题的点击功能扩展或拖动功能排序的一部分，但我希望它按照手风琴排序后。

I have the code ready to use, however I cannot seem to overlay the button on the header without it being part of the header on click function to expand or drag function to sort, however I do want it to follow the the accordion upon being sorted.

function create_accordian(str) {
    $( str )
    .accordion({
        header: '> div > h3',
        autoHeight: false,
        active: false,
        collapsible: true,
    })
    .sortable({
        axis: 'y',
        handle: 'h3',
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( 'h3' ).triggerHandler( 'focusout' );
        }
    });
}

小提琴

我试过修改CSS的删除功能的位置贡献，上面的jQuery代码，头文件定义，包装在 div 和分别定义头。所有我的努力已经到了死胡同。

I have tried modifying the CSS for the position tributes of the delete feature, the above jQuery code for where the header is defined, wrapping both in a div and defining the header separately. All my efforts have come to a dead end.

我需要能够有一个删除图标在每个标题移动，同时排序，并有一个单独的点击功能因此它不会扩展或拖动手风琴。

I need to be able to have a delete icon on each header which moves whilst being sorted and has a separate on click function so it does not expand or drag the accordion.

最好的问候，
Tim

Best Regards, Tim

推荐答案

您需要两组更新才能达到所需的目标。注意我添加了一个 .RemoveSection 到你的< span> 。

You need two sets of updates to achieve the desired goal. Note I added a class of .RemoveSection to your <span> with the 'X' icon to facilitate these examples.

首先，为您拥有的X图标创建一个 .click（）步骤，使用 .stopPropagation（）（在此参考）以确保其点击事件不会冒泡到jQ UI可排序：

First, create a .click() handler for the 'X' icon you have and in its first step, use .stopPropagation() (reference here) to ensure its click event does not bubble up to the jQ UI sortable:

$('.RemoveSection').click(function(event){
    event.stopPropagation();
});

接下来，使用 cancel a href =http://api.jqueryui.com/sortable/#option-cancel =nofollow>参考此处）jQ UI可排序小部件排除您的X图标为用于排序的句柄：

Next, leverage the cancel option (reference here) for the jQ UI sortable widget to exclude your 'X' icon from being a handle for sorting:

.sortable({
    axis: 'y',
    handle: 'h3',
    cancel: '.RemoveSection', // This excludes your 'X' icon
    stop: function( event, ui ) {
        // IE doesn't register the blur when sorting
        // so trigger focusout handlers to remove .ui-state-focus
        ui.item.children( 'h3' ).triggerHandler( 'focusout' );
    }
});

更新了jsFiddle，从yours分支： http://jsfiddle.net/2aLec/2/

Updated jsFiddle, forked from yours: http://jsfiddle.net/2aLec/2/

虽然我实际上并没有将脚本添加到删除可排序部分，给它一个go&如果你需要帮助后回来。你的一般做法应该是简单地遍历DOM从你的'X'图标到父标题，然后删除它&它的兄弟< div> （也许可以启动一个 .refresh（）

While I did not actually add the script to delete the sortable section, give it a go & post back if you need help. Your general approach should be to simply traverse up the DOM from your 'X' icon to the parent header, then remove it & its sibling <div> (and maybe kick off a .refresh() of the sortable for good measure).

这篇关于如何在jQuery Sortable折叠标题上实现一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！