c# - Jquery Drag and Drop - Not able to drag back -

c# - Jquery Drag and Drop - Not able to drag back -

i want able set item original location list, drag or remove button im destiny list. until have been able drag final list , remove final list, can't find way set original list.

here code have (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 auto extras</h1> <div class="ui-widget-content"> <ol> <li class="placeholder">add items here</li> </ol> </div>

thanks help.

after long hours of search , tests, came solution seems cover all:

drag list favorite list button send favorite list drag original section remove button move original section fade in , fade out of movement

all based on 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 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 info , 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" }); // features list | drop $myfeatures.droppable({ accept: "#featureslist li", drop: function (event, ui) { addtomyfeatures(ui.draggable); } }) // features list | drop 1 time again $featureslist.droppable({ accept: "#myfeatures li", drop: function (event, ui) { removefrommyfeatures(ui.draggable); } }) // add together 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 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 add together or remove feature 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); } homecoming false; }) }); </script>

c# javascript jquery