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>