Unable to drop into empty sortable
https://github.com/rniemeyer/knockout-sortable/issues/23
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
<script src="https://raw.github.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<div data-bind="foreach: lists">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody data-bind="sortable: {data: list}" style="height:20px">
<tr>
<td data-bind="text: name" ></td>
<td data-bind="text: desc"></td>
</tr>
</tbody>
</table>
</div>
JavaScript
///////////////////////////////
//create a draggable that is appropriate for dropping into a sortable
ko.bindingHandlers.drag = {
init: function(element, valueAccessor, allBindingsAccessor)
{
//set meta-data
ko.utils.domData.set(element, "ko_dragItem", valueAccessor());
//combine options passed into binding (in dragOptions binding) with global options (in ko.bindingHandlers.drag.options)
var options = ko.utils.extend(ko.bindingHandlers.drag.options, allBindingsAccessor().dragOptions);
//initialize draggable
$(element).draggable(options);
},
options:
{
connectToSortable: "." + ko.bindingHandlers.sortable.connectClass,
helper: "clone"
}
};
//set up a receive handler for sortable that recognizes drag items
ko.bindingHandlers.sortable.options.receive = function(event, ui)
{
var el = ui.item[0];
var item = ko.utils.domData.get(el, "ko_dragItem")
var draggable, targetParent, targetIndex;
if (item)
{
targetParent = ko.utils.domData.get(this, "ko_sortList");
draggable = $(this).children(".ui-draggable");
targetIndex = draggable.index();
if (targetIndex >= 0)
{
targetParent.splice(targetIndex, 0, item);
draggable.remove();
}
}
};
ko.bindingHandlers.flash = {
init: function(element) {
$(element).hide();
},
update: function(element, valueAccessor)
{
var value = ko.utils.unwrapObservable(valueAccessor());
if (value)
{
$(element).stop().hide().text(value).fadeIn(function()
{
clearTimeout($(element).data("timeout"));
$(element).data("timeout", setTimeout(function()
{
$(element).fadeOut();
valueAccessor()(null);
}, 3000));
});
}
},
timeout:...