Панели-аккордеоны с возможностью перетаскивания? (ASP.Net)

У меня есть набор панелей аккордеона (динамически созданных), содержащихся в элементе управления Accordion. По сути, я хочу, чтобы пользователь мог перетаскивать эти панели аккордеона, чтобы вместо

A pane
B pane
C pane

Они могут перетаскивать его, чтобы было что-то вроде

B pane
A pane
C pane

Или что угодно. Кроме того, что более важно, мне нужно было бы определить, что они изменили порядок. Будет ли способ сделать это, когда они «отбрасывают» панель, чтобы она могла обновлять скрытое поле или что-то в этом роде? Мне не нужна обратная передача при каждом перетаскивании, а скорее я хочу, чтобы при нажатии кнопки сохранения серверное приложение определяло порядок, в котором находятся панели, чтобы оно могло сохранить этот порядок.

Я бы предпочел держаться подальше от библиотек javascript, но если это будет самый простой способ, то я его рассмотрю.


javascript c# drag-and-drop accordion asp.net
person Earlz    schedule 24.11.2009    source источник

Ответы (4)


arrow_upward
4
arrow_downward

На основе ответа petersendidit, но без "исчезающего аккордеона" ошибка...

<div id="accordion">
    <div id="section_1">
        <h3>Section 1</h3>
        <p>
        Body 1
        </p>
    </div>
    <div id="section_2">
        <h3>Section 2</h3>
        <p>
        Body 2
        </p>
    </div>
    <div id="section_3">
        <h3>Section 3</h3>
        <p>
        Body 3
        </p>
    </div>
<div id="section_4">
        <h3>Section 4</h3>
        <p>
        Body 4
        </p>
    </div>
</div>

и

$("#accordion").accordion({
    header:'h3'
}).sortable({
    items:'>div'
});

Демо по адресу: https://jsbin.com/bitiyucasa

person Stobor    schedule 07.12.2009
comment
Рекомендуется использовать ›div.[КЛАСС АККОРДЕОННОЙ ПАНЕЛИ] - person Earlz; 09.12.2009
comment
может я что-то не так делаю, но у меня эта демка вообще НЕ работает - person Dave Lawrence; 15.09.2014
comment
@daveL Нет, ты прав - похоже, он перестал работать где-то за последние 5 лет... - person Stobor; 16.09.2014
comment
@DaveLawrence - я (наконец-то) взглянул на это сегодня - похоже, что библиотеки jquery, на которые он ссылался, устарели. Я обновил их снова, и теперь это работает. - person Stobor; 09.01.2020
comment
@Stobor честная игра, чтобы снова взглянуть 6 лет спустя :) К счастью, я ушел из дней jquery! - person Dave Lawrence; 02.03.2020
comment
@Dave Как и я, поэтому это заняло так много времени. :) - person Stobor; 05.03.2020

arrow_upward
2
arrow_downward

Вы можете сделать что-то подобное с интерфейсом jQuery:

$("#accordion").accordion()
.sortable({
    items:'>.ui-accordion-header',
    change: function(event, ui) {
        $content = ui.item.next();
    },
    stop: function(event, ui) {
        ui.item.after($content);
    }
});

Это устанавливает $content в div содержимого для этого заголовка при изменении. А затем при остановке этот контент перемещается после новой позиции заголовка.

HTML будет примерно таким:

<div id="accordion">
    <h3 id="section_1"><a href="#">Section 1</a></h3>
    <div>
        <p>
        Body 1
        </p>
    </div>
    <h3 id="section_2"><a href="#">Section 2</a></h3>
    <div>
        <p>
        Body 2
        </p>
    </div>
    <h3 id="section_3"><a href="#">Section 3</a></h3>
    <div>
        <p>
        Body 3
        </p>
    </div>
    <h3 id="section_4"><a href="#">Section 4</a></h3>
    <div>
        <p>
        Body 4
        </p>
    </div>
</div>

Когда ваш пользователь нажимает кнопку «Сохранить», вы можете просто позвонить:

$('#accordion').sortable( 'serialize');

Что даст вам что-то вроде:

section[]=2&section[]=1&section[]=3&section[]=4
person PetersenDidIt    schedule 03.12.2009
comment
Я попробовал это, и это не позволяет мне перетаскивать панели аккордеона, чтобы прибегать к ним. Я использовал ваш почти точный код, и он не позволял перетаскивать. Я никогда раньше не использовал jquery, поэтому в вашем коде может быть какая-то тривиальная ошибка, которую я не вижу - person Earlz; 03.12.2009
comment
В порядке. Я не включал файл jqueryui (только jquery). Во всяком случае, это выглядит довольно хорошо. Предназначен ли jquery для этого? Потому что я заметил довольно серьезную ошибку, из-за которой вы можете перетаскивать панели в другие панели, чтобы они исчезли (это легко сделать и без намерения). - person Earlz; 03.12.2009
comment
Пользовательский интерфейс jQuery не поддерживает это, но с некоторой доработкой вы, вероятно, могли бы заставить его работать довольно хорошо. Во всяком случае, вы могли бы расширить jQuery UI Accordion и Sortable и изменить его, чтобы он работал так, как вы хотите. - person PetersenDidIt; 03.12.2009
comment
Что ж, ваш ответ был замечательным, но я должен пойти с @stobor, потому что он уже готов .. Если бы я только мог дать вам обоим ответ! ржу не могу - person Earlz; 07.12.2009

arrow_upward
1
arrow_downward

  • Возможно, вам нужен этот виджет.

Вы можете добавить ссылки на javascript в шапке

<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>

Тогда разметка представляет собой просто серию div. Приложив немного усилий, вы сможете связать это с элементом управления аккордеоном или создать пользовательский элемент управления, чтобы выполнять ваши ставки.

 <div id="acc-ct" style="width:200px;height:300px">
  <div id="panel-1">
    <div>My first panel</div>
    <div>
      <div class="text-content">My first panel content</div>
    </div>
  </div>
  <div id="panel-2">
    <div>My second panel</div>
    <div>
      <div class="text-content">My second panel content</div>
    </div>
  </div>
</div>

Предварительный просмотр доступен здесь

Надеюсь это поможет

person Matt    schedule 01.12.2009
comment
Я оставлю этот вопрос открытым, чтобы надеяться на что-то немного дешевле, чем 1299 долларов (мы разрабатываем проприетарное программное обеспечение). Хотя, похоже, это именно то, что нам нужно. - person Earlz; 01.12.2009
comment
Я не знал, что с этим связана коммерческая стоимость лицензии, извините :( - конечно, всеобъемлющая. - person Matt; 01.12.2009

arrow_upward
0
arrow_downward

Вы можете использовать предопределенный элемент управления dojo (инфраструктура JavaScript с открытым исходным кодом) (текст ссылки) и использовать этот элемент управления отсюда ( текст ссылки ). Вы также можете интегрировать dojo с asp.net, как в моем блоге (текст ссылки).

Ждем ответа о вашем успехе

person radu florescu    schedule 07.12.2009