c# - Jquery拖放 - 无法拖回

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

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

• 从列表拖动到收藏列表
• 按钮发送到收藏列表
• 拖回原来的Section
• 删除按钮以移回原始部分
• 淡入和淡出运动

所有这些都基于 JQuery 照片管理器示例：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>