長時間の検索とテストの後、すべてをカバーしているように見えるソリューションにたどり着きました。
- リストからお気に入りリストにドラッグ
- お気に入りリストに送信するボタン
- 元のセクションにドラッグして戻します
- 元のセクションに戻る削除ボタン
- 動きのフェードインとフェードアウト
これはすべて JQuery Photo Manager の例に基づいています: http://jqueryui.com/droppable/#photo-manager
モデル：
public class FeatureDto
{
public int Id { get; set; }
public string Name { get; set; }
}
public class FeatureGroupDto
{
public int Id { get; set; }
public string Name { get; set; }
}
public class FeatureGroupFeaturesDto
{
public FeatureGroupDto FeatureGroup { get; set; }
public IList<FeatureDto> Features { get; set; }
}
テスト用データ:
IList<FeatureGroupFeaturesDto> fcf = new List<FeatureGroupFeaturesDto>();
fcf.Add(new FeatureGroupFeaturesDto
{
FeatureGroup = new FeatureGroupDto { Id = 1, Name = "Interior" },
Features = new List<FeatureDto> {
new FeatureDto { Id = 7, Name = "Bancos Traseiros Rebatíveis" },
new FeatureDto { Id = 35, Name = "Computador de Bordo" },
new FeatureDto { Id = 38, Name = "Suporte para Telemóvel" }
},
});
fcf.Add(new FeatureGroupFeaturesDto
{
FeatureGroup = new FeatureGroupDto { Id = 2, Name = "Exterior" },
Features = new List<FeatureDto> {
new FeatureDto { Id = 13, Name = "Barras de Tejadilho" },
new FeatureDto { Id = 15, Name = "Retrovisores Aquecidos" },
new FeatureDto { Id = 16, Name = "Retrovisores Elétricos" }
},
});
テスト データとすべてのスクリプトに基づくアコーディオンの作成を含むコード:
@model IEnumerable<Heelp.ViewModels.FeatureGroupFeaturesViewModel>
<div id="featuresList">
@foreach (var item in Model) {
<h1>@item.FeatureGroup.Name</h1>
<div>
<ul id="fg@(item.FeatureGroup.Id)">
@foreach (var feature in item.Features)
{
<li id="@feature.Id" class="feature">@feature.Name <a href="#" class="feature-send-to-my-list">[»]</a></li>
}
</ul>
</div>
}
</div>
<h1>My Features</h1>
<div id="myFeatures">
<ol></ol>
</div>
<div id="test"></div>
<style>
.feature { cursor: move; }
h1 { cursor: pointer; }
#myFeatures ol { margin: 0; padding: 1em 0 1em 3em; background-color: lightgray; width: 200px; height: 100px; cursor: move; }
</style>
<script>
$(function () {
var $featuresList = $("#featuresList"), $myFeatures = $("#myFeatures");
// Accordion
$featuresList.accordion();
// Features List | Drag
$("ul > li", $featuresList).draggable({
revert: "invalid",
containment: "document",
helper: "clone"
});
// My Features List | Drop
$myFeatures.droppable({
accept: "#featuresList li",
drop: function (event, ui) {
addToMyFeatures(ui.draggable);
}
})
// Features List | Drop Back Again
$featuresList.droppable({
accept: "#myFeatures li",
drop: function (event, ui) {
removeFromMyFeatures(ui.draggable);
}
})
// Add to MyFeatures List function
var removeButton = "<a href='#' class='feature-remove-from-my-list'>[x]</a>";
function addToMyFeatures($feature) {
$feature.fadeOut(function () {
$feature.find("a.feature-send-to-my-list").remove();
$feature.find("span").remove();
$feature
.append("<span style='display:none'>" + $feature.parent('ul').attr('id') + "</span>")
.append(removeButton)
.appendTo("ol", $myFeatures)
.fadeIn();
});
}
// Remove from MyFeatures List function
var addButton = "<a href='#' class='feature-send-to-my-list'>[»]</a>";
function removeFromMyFeatures($feature) {
$feature.fadeOut(function () {
var featureGroup = "#" + $feature.find("span").text();
$feature.find("a.feature-remove-from-my-list").remove();
$feature
.append(addButton)
.appendTo(featureGroup)
.fadeIn();
});
}
// Click event to add or remove Feature from My List
$("#featuresList li").click(function (event) {
var $item = $(this), $target = $(event.target);
if ($target.is("a.feature-send-to-my-list")) {
addToMyFeatures($item);
}
else if ($target.is("a.feature-remove-from-my-list")) {
removeFromMyFeatures($item);
}
return false;
})
});
</script>