Helper function returning list element bug

[jyonker]

We've noticed the bug mentioned in #186 also occurs when not using connected lists. Using a simple helper function like:

helper: function (e, ui) {
      return ui;
}

Causes the same sort of bug when you drag any item to the bottom of the list. Here's the simple example in codepen: http://codepen.io/anon/pen/Ecbqr

A simple fix that works is to expand upon the fix suggested in the other issue like this:

if (hasSortingHelper(element) 
&& !ui.item.sortable.received 
&& savedNodes.last()[0].nodeName === "#text") {

While this works, it doesn't look like the "right" solution. We're looking for some insight into a cleaner solution that achieves the same thing. Thanks!

[thgreasi]

Does the provided helper function, actually use the original element as a helper element for the drag? Does it work if you return a clone() of the dragged element?
Never thought that the helper function could be used as a programmatic way to enable/disable helper: 'clone'. If this is an actual use case for you, then we should better chance the way hasSortingHelper works.

[thgreasi]

It looks like we will have to create a wrapper for the helper option to check if the returned item is already attached to the list. I currently can't find a way to extract the above information from e and ui objects passed to the callbacks.

[jyonker]

The reason that we return the original element is because, when using tables, the clone that sortable creates does not respect table cell widths. We use this common workaround:

helper: function (e, ui) {
      ui.children().each(function() {
         $(this).width($(this).width());
      });
      return ui;
}

(Some other examples of the workaround: rniemeyer/knockout-sortable#46 and http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/)

Your comment about using clone() led us to find this SO answer http://stackoverflow.com/a/1372954 which seems to be a better workaround and also works correctly with the existing ui-sortable code.

That being said, it might still be useful to handle the case when the helper function returns the original element. Could you use a wrapper to intercept the returned value from the helper method and check if it is === to the ui object?

Something sort of like:

function helperWrapper(e, ui) {
    var helperResult = helperFunction(e, ui);
    helperReturnsOriginalObject = (helperResult === ui);

    return helperResult;
}

function hasSortingHelper(element) {
    return !helperReturnsOriginalObject && oldHasSortingHelperFunction(element);
}

[thgreasi]

Will give it a try tomorrow. Thanks for the details.

[jyonker]

No problem. Thanks for discussing it. Would it be helpful if I wrote up a PR around the solution that I proposed? I suspect you'd have to modify it a bit, but it could be a starting point.

[thgreasi]

Please take a look at #198 and take some tests.

[thgreasi]

Resolved by #200