saurabh_mohali Ответов: 1

Перетаскивание записей listbox в другой listbox


Привет ,

Может ли кто-нибудь предложить мне лучший способ создания перетаскиваемого списка , я использую .net mvc 4 и jquery .У меня есть два списка . Я хочу перетащить записи из 1-го списка во 2-й список без какого-либо обновления страницы .

Спасибо и с уважением

Что я уже пробовал:

Я хочу перетащить записи из 1-го списка во 2-й список без какого-либо обновления страницы .

Afzaal Ahmad Zeeshan

Вы пробовали перетаскивать сам API? Я думаю, что это будет работать довольно хорошо.

Но знайте, что это требует применения некоторых имен классов к элементу (listbox), поэтому применяйте их.

1 Ответов

Рейтинг:
0

Gyan.Prakash404

1. Включите последнюю версию библиотеки jQuery и пользовательского интерфейса jQuery от google CDN.
2. Включите плагин jQuery fieldChooser после библиотеки javascript jQuery.

просмотр источника:


3.разметка html-структуры.

просмотр источника:

<pre lang="text">

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Пункт 5

...



4.JavaScript-код.

просмотр источника
<script>
$(document).ready(function () {
var $chooser = $("#fieldChooser").fieldChooser();
var $sourceFields = $("#sourceFields").children();
$chooser.getSourceList().add($sourceFields);
});
</script>

5. С помощью CSS согласно необходимому

div#sourceFields {
display: none;
}
div#fieldChooser {
width: 350px;
}
.fc-field {
margin: 0 0 0 0;
padding: 5px;
font-size: 1.2em;
width: 120px;
outline: #777777 ridge thin;
background-color: #cccccc;
}
.fc-selected {
background-color: #999999;
}
.fc-field-list {
margin: 0;
padding: 3px 3px 3px 3px;
margin-right: 10px;
outline: #333333 solid thin;
height: 600px;
width: 150px;
overflow: scroll;
}
.fc-source-fields {
float: left;
}
.fc-destination-fields {
float: right;
}