Jquery Drag and Drop - Not able to drag back

Question

I want to be able to put back an item to his original location list, by drag or by a remove button im the destiny list. Until now I have been able to drag to the final list and to remove it from the final list, but I can't find a way to put it back to the original list.

Here is the code I have by now (testable version here: 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>

Thanks for any help.

Answer 1

After long hours of search and tests, I came to a solution that seems to cover all:

• Drag from List to Favorite List
• Button to send to Favorite List
• Drag back to the original Section
• Remove button to move back to the original Section
• Fade In and Fade Out of the movement

All this based on the JQuery Photo Manager example: http://jqueryui.com/droppable/#photo-manager

Model:

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; }
}

Data for tests:

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" }
    },
});

Code including Accordion creation based on Test Data and all Script:

@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>