How do I get the helper option to work? Especially with "clone".

[yizhao]

Does this library implement JQuery's native clone feature?

I know there is an example of a "clone" but it doesn't use JQuery's native helper. It only adds a element back to the original list after it has been dropped.

Here is a plunker: http://plnkr.co/edit/AwdAivvVZcnV9aDxbp7m?p=info

Any advice is appreciated.

[thgreasi]

What do you mean by it doesn't use JQuery's native helper?
Using helper: 'clone' in plain jQuery creates a clone of the dragged element and leaves the original element behind (hidden while dragging). BUT JQuery just creates an element with the same HTML as the original and has nothing to do with models.

The exact same thing happens in ui-sortable but the actual model item is moved (no matter what you use for the helper option). After the sorting, ui-sortable kicks in and transfers the model and then both ng-repeat's detect that their model has changed and update the DOM and thats the point that ui-sortable kicks in.
As a result, the source sortable list has to have its ng-model restored, otherwise the ng-repeat will remove the dragged item.

I was initially thinking of actually doing this internally in case helper is set to 'clone', but then this could complicate things.

• Should the cloned model be a shallow or a deep copy?
• How should the library handle something like:

helper: function (e, item) {
  return item.clone();
}

Should it guess that this is equivalent to helper: 'clone'?
How about more complex use cases where something totally different from the original element is used as a helper??

As a result, in the current version helper: 'clone' does not affect how the models are manipulated, you should manage them yourself.
Currently helper: 'clone' just means that:

• a helper element will be used for the sorting, not the original DOM element
• this helper presented while dragging will be a clone of the original DOM element

Do you think that helper: 'clone' should result work out of the box but helper: function(){} should require the developer to manage the models?

[yizhao]

Thanks for your prompt reply.

Some of the stuff you said went over my head since I have no prior experience with JQuery but I more or less understood your point.

I have two questions:

1. If I want to do it "internally" and add the element that was dragged back to the source list, how do I do that?
2. I would like to take the element that is currently being dragged and reassign the parent to be the element. Can this be done?

Thanks.

[thgreasi]

I would suggest you take a look at #139 and especially this comment. Also take a look at this fiddle that demonstrates what helper: 'clone' + connectWith actually do by themselves.

1. I just created a new branch that demonstrates the changes (in src/sortable.js) needed to do the cloning "internally / under the hood".
2. Please be more descriptive, I lost you somewhere.

[yizhao]

Thanks for the resource, I'll def take a look.

So the reason I want to do this clone stuff is because of this issue... http://plnkr.co/edit/AwdAivvVZcnV9aDxbp7m?p=info

When you drag an element from the source to the destination, if the source div has "position: fixed", the dragged element will get cut off when it reaches the edge of the div. To get around this problem, I thought it would help if when I start dragging, I can use JQuery to attached the element to Body. Do you know if that will work? Maybe a better way to get around this problem?

[thgreasi]

appendTo should do the job like you said (attaching to body). I would like to know your results.

[yizhao]

Update: I put appendTo: "body" into options and it worked like a charm.

[koolmoo]

Hi,

Sorry to bring up an old issue, but I was having the same problem and eventually realized that appendTo doesn't work without specifying a helper (other than default). Unfortunately, this wasn't noted anywhere in the jQuery UI docs. Just wanted to confirm this is the expected result, and also to put it on the record for anyone who's new to ui sortable like me.

For reference, this is what I eventually used:
appendTo: "body", helper: "clone", zIndex: 9999,

[thgreasi]

Hi there.
That's strange, since sortable.e2e.spec.js has test cases with helper: 'clone' used with and without the appendTo option! Can you fork one of
the codepen examples found in README to demonstrate your code & issue?

Thodoris Greasidis