i'm new jquery wanted when onclick submit button whatever inside droppable display out been dropped inside, whatever drop inside display out ids together.. wanted them display differently can put inside form wizard step 1, 2 or 3.. ideas how that? please guide me along..
javascript
/* drag , drop */ $(function() { var countdropped = 0; $("#dragicons img").draggable({ revert: "invalid", refreshpositions: true, cursor: "move", cursorat: { top: 56, left: 56 }, drag: function(event, ui) { ui.helper.removeclass("end-draggable"); ui.helper.addclass("draggable"); }, stop: function(event, ui) { ui.helper.addclass("end-draggable"); ui.helper.removeclass("draggable"); } }); $('#reset').click(function(e) { e.preventdefault(); var dropped_icon = $('#briefcase-droppable') .children() .detach() .removeclass('dropped end-draggable') .removeattr('style') .css('position', 'relative'); $('#dragicons').append(dropped_icon); $('#briefcase').css('background', 'url("http://simpleicon.com/wp-content/uploads/briefcase-12.png")'); }); $("#briefcase-full").droppable({ greedy: true, tolerance: 'touch', drop: function(event, ui) { var id = ui.draggable.attr("id"); if ($("#briefcase").length == 0) { $("#briefcase-droppable").html(""); } countdropped++; ui.draggable.addclass("dropped"); $("#briefcase-droppable").append(ui.draggable); } }); $("#submit").click(function() { var iconsid = " " $("#briefcase-droppable").children(".icons").each(function() { iconsid += $(this).attr("id"); }); $("#listicon").html(iconsid); }); });
replace script work
/* drag , drop */ $(function() { var countdropped = 0; $("#dragicons img").draggable({ revert: "invalid", refreshpositions: true, cursor: "move", cursorat: { top: 56, left: 56 }, drag: function(event, ui) { ui.helper.removeclass("end-draggable"); ui.helper.addclass("draggable"); }, stop: function(event, ui) { ui.helper.addclass("end-draggable"); ui.helper.removeclass("draggable"); } }); $('#reset').click(function(e) { e.preventdefault(); var dropped_icon = $('#briefcase-droppable') .children() .detach() .removeclass('dropped end-draggable') .removeattr('style') .css('position', 'relative'); $('#dragicons').append(dropped_icon); $('#briefcase').css('background', 'url("http://simpleicon.com/wp-content/uploads/briefcase-12.png")'); }); $("#briefcase-full").droppable({ greedy: true, tolerance: 'touch', drop: function(event, ui) { var id = ui.draggable.attr("id"); if ($("#briefcase").length == 0) { $("#briefcase-droppable").html(""); } countdropped++; ui.draggable.addclass("dropped"); $("#briefcase-droppable").append(ui.draggable); } }); $("#submit").click(function() { $("#dragicons").append($("#briefcase-droppable").html()); $("#dragicons").find('br').remove(); $("#dragicons img").after("<br />"); $("#briefcase-droppable").html(""); }); }); 