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

长时间的搜索和测试后，我来到这似乎涵盖所有的解决方案：

• 从列表中拖动到收藏夹列表
• 按钮，可向收藏夹列表
• 拖回原科
• 删除按钮搬回原来的第
• 淡入和淡出运动

这一切都基于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>