javascript - Getting jQuery sortable - ranking issue -
i have make jquery sortable , droppable work together. have done this. there 1 problem in sorting.
problem:
when drag , drop 2 items in rhs(right hand side) , sort first item below second position of seconds item shifts 1 step above. example if have 2 items on no. of position 2nd , 4th, when sort 2nd positioned item below 4 4th items shifts 3rd position, don't want. tried best fix not able, end know default functionality don't want.
i want when sort position of 1 item 1 not move 1 step upward.
running code: http://jsfiddle.net/gbg8r/
<script> $(function () { // create unique ids function rankorder(){ var index = 1; $(".rank-order-controller").each(function () { var itemid = $(this).attr("id", "rank-order-" + index++); var getid = "#" + $(this).attr("id"); var minrankselection = $(getid+" .minrankselectioninput").val(); // need call dynamic input value planner side option "rank how many choices?" var allchoices = $(getid+ " .drag-container ul.items li").length; // if rank number not defined if (minrankselection == ''){ minrankselection = allchoices; } // create dynamic dom element rank items (var i=1; <= minrankselection; i++){ $("<li>" + +"</li>").appendto($(getid+" .sort-container ul.rank")); $("<li><div class='item disable'>drag choices here</div><input type='text' value='' class='value' style='display:none' /><span class='delete'></span> <span class='move-cursor'></span></li>").appendto($(getid+" .sort-container ul.items")); } //set default height of left column var itemheight = $(getid+" .drag-container ul").height($(getid+" .sort-container ul").height()-2); // $(getid+" .drag-container").height($(getid+" .sort-container ul").height()-2); // var itemheight = $(getid+" .drag-container").height($(getid+" .sort-container ul").height()-2); $(getid+" .drag-container ul").height($(getid+" .drag-container ul").height()-2); // if rank number of item equal rank number of choices if(allchoices == minrankselection){ $(getid+ " .drag-container").css("overflow-y","visible"); }else{ $(getid+ " .drag-container").css("overflow-y","scroll"); } //invoke functions binddraggable(getid, "ul.items li"); binddroppablesortable(getid, ".sort-container ul.items li"); binddroppable(getid, ".drag-container ul.items"); deleteitems(getid, ".sort-container ul.items"); }); } rankorder(); // make items draggable function binddraggable($id, selector) { $(selector, $id).each(function () { var currentselector = $(this); currentselector.find("div:not(.disable)").draggable({ helper: "clone", revert: 'invalid', handle: "div", zindex: 100, disabled: false, containment: $id, start: function (event, ui) { $(this).addclass("hidden"); currentselector.find("span").addclass("hidden"); }, stop: function () { $(this).removeclass("hidden"); currentselector.find("span").removeclass("hidden"); } }); }); } // make right col items droppable , bind sortable function binddroppablesortable($id, selector) { $(selector, $id).each(function () { var currentselector = $(this); currentselector.find("div").droppable({ activeclass: "ui-state-active", hoverclass: "ui-state-hover", accept: $id + " .drag-container div", drop: function (event, ui) { var $this = $(this); $this.droppable('disable').removeclass().addclass("item"); binddraggable($id, ".sort-container ul.items li"); // recall func currentselector.addclass("ui-state-default").find(".move-cursor").css('display', 'block'); $this.text(ui.draggable.text()); // update text var $deleteli = $(ui.draggable).parent(); $this.html($(ui.draggable).remove().html()); $deleteli.remove(); // remove left col <li> $(selector, $id).find("div").removeclass("ui-state-active"); var indexval = currentselector.index(); $(currentselector).find("input.value").val(indexval).attr("value", indexval + $this.text()); } }).closest("ul.items").sortable({ //items:".ui-state-default", cursor: "move", handle: ".move-cursor", revert: true, containment: "parent", //helper: "clone", placeholder: "placeholder", tolerance: "pointer", stop: function(event, ui){ //var indexval = ui.item.index(); $(ui.item).find("input.value").val(ui.item.index()).attr('value', ui.item.index() + ui.item.text()); } }).disableselection(); }); } // make left col items droppable function binddroppable($id, selector) { $(selector, $id).droppable({ activeclass: "ui-state-active", hoverclass: "ui-state-hover", accept: $id + " .sort-container div", drop: function (event, ui) { var newitem = $('<li/>'); $('<div/>', { "class":"item", text: ui.draggable.text() }).appendto(newitem); newitem.appendto($(this)); binddraggable($id, ".drag-container li"); // recall func $(ui.draggable).text("drag choices here").removeclass("ui-state-active").addclass("disable").draggable("disable").droppable("enable"); $(ui.draggable).closest("li").removeattr("class").find("span").css("display", "none") } }) } // make right items deletable function deleteitems($id, selector) { $(selector, $id).on("mouseenter", ".ui-state-default", function (event) { var currentselector = $(this); currentselector.find("div").addclass("ui-state-active").end().find("span.delete").css('display', 'block').click(function (event) { if($(this).parent('li.ui-state-default').find("div").length == 0) return; var newitem = $('<li/>'); $('<div/>', { "class":"item", text: currentselector.find("div").text() }).appendto(newitem); newitem.appendto($id + " .drag-container ul.items"); // new items currentselector.removeattr("class").find("div").removeclass("ui-state-active").addclass("disable").text("drag choices here").droppable("option","disabled", false).draggable("disable"); currentselector.find("span").css('display', 'none'); binddraggable($id, ".drag-container li"); // recall func }); }); $(selector, $id).on("mouseleave", ".ui-state-default", function (event) { $(this).find("div").removeclass("ui-state-active").end().find("span.delete").css('display', 'none'); }); } }); // anonymous function end </script>
Comments
Post a Comment