Пример комбинирования перетаскивания jquery и вкладок - PullRequest
Новая
       1

Пример комбинирования перетаскивания jquery и вкладок

2 голосов
/ 29 сентября 2010

Я видел несколько хороших примеров того, как использовать jquery для перетаскивания и отдельно о том, как делать вкладки.

Кто-нибудь знает или знает пример, который объединяет оба?

В основном говорят, что у вас есть <div> в левой части экрана с перетаскиваемыми объектами, а затем вы можете перетащить их на одну из вкладок в правой части экрана.

Кроме того, хотелось бы знать, как разрешить кому-либо перетаскивать его на видимую вкладку, а также перетаскивать элемент в метку вкладки для скрытой вкладки и вставлять туда объект. В идеале вы бы хотели, чтобы эта скрытая вкладка стала видимой, чтобы пользователь мог видеть, что элемент вставлен правильно.

Ответы [ 2 ]

0 голосов
/ 16 августа 2014

Вот пример из моего ответа на другой похожий вопрос , который:

  • Скрывает элементы из текущей вкладки
  • Откройтевыпадающая вкладка и отображает упавшие элементы
  • Поддерживает перетаскивание нескольких элементов

Похоже на то, что вы просите ...

HTML 

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
</ul>
<div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 1</li>
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 2</li>
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 3</li>
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 4</li>
        <li class="ui-state-default">
            <input class="chbox" type="checkbox" />Item 5</li>
    </ul>
</div>
<div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">

    </ul>
</div>

JS 

$('.connectedSortable').on('click', 'input', function () {
 $(this).parent().toggleClass('selected');
});

$("#sortable1, #sortable2").sortable({
  revert:0,
  helper: function (e, item) { //create custom helper
    if (!item.hasClass('selected')) item.addClass('selected');
    // clone selected items before hiding
    var elements = $('.selected').not('.ui-sortable-placeholder').clone();
    //hide selected items
    item.siblings('.selected').addClass('hidden');
    var helper = $('<ul/>');
    return helper.append(elements);
  },
  start: function (e, ui) {
    var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
    //store the selected items to item being dragged
    ui.item.data('items', elements);
  },
  update: function (e, ui) {
    //manually add the selected items before the one actually being dragged
    ui.item.before(ui.item.data('items'));
  },
  stop: function (e, ui) {
    //show the selected items after the operation
    ui.item.siblings('.selected').removeClass('hidden');
    //unselect since the operation is complete
    $('.selected').removeClass('selected');
     //uncheck since the operation is complete
    $(this).find('input:checked').prop('checked',false);
  }
}).disableSelection();

var $tabs = $("#tabs").tabs();
var $tab_items = $("ul:first li", $tabs).droppable({
  accept: "ul, .connectedSortable li",
  hoverClass: "ui-state-hover",
  drop: function (event, ui) {
    var $item = $(this);
    var $elements = ui.draggable.data('items');
    var $list = $($item.find("a").attr("href"))
        .find(".connectedSortable");
    $elements.show().hide('slow');
    ui.draggable.show().hide("slow", function () {
        $tabs.tabs("option", "active", $tab_items.index($item));
        $(this).appendTo($list).show("slow").before($elements.show("slow"));   
    });
  }
});

DEMO

0 голосов
/ 23 апреля 2014

Следующий фрагмент кода предназначен для перетаскивания содержимого с одной вкладки на другую. Я пробовал это в IE 9, и он работает нормально. Таблица стилей, на которую я ссылался с сайта jquery-ui. Надеюсь, это поможет.

Перетаскивание вкладок 

<html>
<head>
<title>Drag Drop Tab</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
    var isAutoSelectable = false;
    $(function () {
        $( "#tabs" ).tabs();

        $("#tabs-1 li, #tabs-2 li, #tabs-3 li").draggable({
            appendTo: "body",
            helper: "clone",
            drag: function(){
                isAutoSelectable = true;
            }
        }).css('z-index','-1');

        $("#hdr-2,#hdr-3,#hdr-1").hover(function(e)
        {
            if(isAutoSelectable)
            {
                var index = e.currentTarget.id.split("-")[1] -1;
                $('#tabs').tabs( "option", "active", index );
            }
        });

        $("#tabs-1, #tabs-2, #tabs-3").droppable({
            drop: function(event,ui)
                    {
                        isAutoSelectable = false;
                        ui.draggable.detach().appendTo($(this)[0].childNodes.item(0));
                    }
        });

    });
</script>
</head>
<body>
<div id="tabs">
    <ul>
    <li><div id="hdr-1" style="height:25px;width:25px"><a href="#tabs-1">Nunc tincidunt</a></div></li>
    <li><div id="hdr-2" style="height:25px;width:25px"><a href="#tabs-2">Proin dolor</a></div></li>
    <li><div id="hdr-3" style="height:25px;width:25px"><a href="#tabs-3">Aenean lacinia</a></div></li>
    </ul>
<div id="tabs-1">
    <ul>
        <li>Lolcat Shirt</li>
        <li>Cheeseburger Shirt</li>
        <li>Buckit Shirt</li>
    </ul>
</div>
<div id="tabs-2">
    <ul>
        <li>Zebra Striped</li>
        <li>Black Leather</li>
        <li>Alligator Leather</li>
    </ul>
</div>
<div id="tabs-3">
    <ul>
        <li>Phone</li>
        <li>Ipad</li>
        <li>IPod</li>
    </ul>
</div>

</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...