Question

我希望能够通过拖动或命运列表中的删除按钮将项目放回原始位置列表。到目前为止，我已经能够拖到最终列表并将其从最终列表中删除，但我无法找到将其重新放回原始列表的方法。

以下是我现在的代码（此处可测试版本：http://jsfiddle.net/PmVhd/）：

<style>
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; cursor: move }
#cart { width: 300px; float: left; margin-top: 1em; cursor: move }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
  $(function () {
      $("#catalog").accordion();
      $("#catalog li").draggable({
          helper: "clone"
      });
      $("#catalog ul").droppable({
          drop: function (event, ui) {
              $(ui.draggable).remove();
              $("<li></li>").text(ui.draggable.text()).appendTo(this);
          }
      });

      $("#cart ol").draggable({
          appendTo: "body",
          helper: "clone"
      });
      $("#cart ol").droppable({
          drop: function (event, ui) {
              $(ui.draggable).remove();
              $(this).find(".placeholder").remove();
              var el = $("<li>" + ui.draggable.text() + "</li>&nbsp;<a href='#'>[x]</a>").filter('a')
                  .click(function () {
                      el.remove();
                   }).end().appendTo(this);
          }
      });
  });

<div id="products">
<h1 class="ui-widget-header">Car Extras</h1>
<div id="catalog">
<h2><a href="#">Security</a></h2>
<div>
  <ul>
    <li id="1">ABS</li>
    <li id="2">ESP</li>
    <li id="3">Airbag</li>
  </ul>
</div>
<h2><a href="#">Confort</a></h2>
<div>
  <ul>
    <li>Air Conditioning</li>
    <li>Hands-free Phone</li>
    <li>Alligator Leather</li>
  </ul>
</div>

<div id="cart">
<h1 class="ui-widget-header">My Car Extras</h1>
<div class="ui-widget-content">
<ol>
  <li class="placeholder">Add your items here</li>
</ol>
</div>

感谢您的帮助。

Answer 1

经过长时间的搜索和测试，我找到了一个似乎涵盖所有人的解决方案：

从列表拖动到收藏夹列表
要发送到收藏夹列表的按钮
拖回原节
删除按钮以返回原始部分
淡入和淡出动作

所有这些都基于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>

Jquery拖放 - 无法向后拖动

1 个答案: