Question

我一直在尝试将上面提到的所有交互和小工具与som效果结合起来，我能够成功完成其中一些，正如您在“fiddle”中看到的那样。

但有些人喜欢在将元素拖到另一个标签时克隆元素，或者在按下a（按面板标题中的减号图标）时使手风琴无效，或者只将一个标签设置为可放置但不可拖动。< / p>

使用Connect lists with Tabs我能够定义一个工作基础。

我可以使用以下代码删除项目（Sep1）：

jQuery(document).ready(function () {
    $(".glyphicon-remove").bind('click', $.proxy(function (event) {
        var status = $(event.target).attr('id').split("_");
        $("#chart_" + status[1] + "_" + status[2]).hide("drop", {
            direction: "up"
        }, "slow");
    }, this));
});

部分做手风琴

jQuery(document).ready(function () {
    $(".glyphicon-minus").bind('click', $.proxy(function (event) {
        var status = $(event.target).attr('id').split("_");
        $("#accordion_" + status[1] + "_" + status[2]).accordion({
            collapsible: true
        });
    }, this));
});

手风琴问题是，第一次点击按钮后，它会将小部件应用到所有面板标题，我只希望它将其应用到按钮。

任何人都可以解释我怎么能这样做，如果可能的话，为我提供一些代码示例？

Answer 1

我能够创建一个解决方案。这是

$(function () {
$(".connectedSortable").sortable(
{
    tolerance: 'pointer',
    cursor: 'move',
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: 'ul.connectedSortable',
    placeholder: "ui-state-highlight"
}
).disableSelection();

var $tabs = $("#tabs").tabs();

var $tab_items = $("ul:first li", $tabs).droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    tolerance: 'pointer',
    drop: function (event, ui) {

        var source = $(ui.draggable[0]).parent().attr("id").split("-")[1];
        var target = $(event.target).children("a").attr("href").split("-")[1];

        if (source == target) {
            return false;
        }

        var $item = $(this);
        var $list = $($item.find("a").attr("href")).children();

        var $dragged = ui.draggable.clone().removeAttr('style');

        //var id = Check($dragged);

        //if (id != false) {

        var $chartId = "chart_0_" + id;
        var $accordionId = "accordion_0_" + id;
        var $minimizeId = "minimize_0_" + id;
        var $closeId = "close_0_" + id;

        $dragged.find("div[id^='chart']").attr("id", $chartId);
        $dragged.find("div[id^='accordion']").attr("id", $accordionId);
        $dragged.find("i[id^='minimize']").attr("id", $minimizeId);
        $dragged.find("i[id^='close']").attr("id", $closeId);

        if ((source == 1 || source == 2) && target === 0) {
            $tabs.tabs("option", "active", $tab_items.index($item));
            $dragged.appendTo($list);
        }
        //}
    }
});

$(".glyphicon-minus").click(function (event) { //ocultar grafico (panel body)
    var status = $(event.target).attr('id').split("_");
    $("#accordion_" + status[1] + "_" + status[2]).slideToggle("slow");
});

$(".glyphicon-remove").click(function (event) { // eliminar separador
    var status = $(event.target).attr('id').split("_");
    $("#chart_" + status[1] + "_" + status[2]).hide("drop", {
        direction: "up"
    }, "slow");
});

$(".glyphicon-floppy-save").click(function (event) { // guardar ordem de elementos dos separadores
    var $saveSortIds = [];

    for (var i = 0; i < 3 ; i++)
        $saveSortIds[i] = $("#sortable-" + i).sortable("toArray"); //1 para cada separador         
});

}）;

结合可拖动，可放置，可排序，标签，克隆手风琴

1 个答案: