[Drag n drop] Ember ignores DOM element it didn't render

Questions
1

Hi ! the problem i’m gonna describe is the exact same as this one Ember jquery ui sortable remove item not in sync except i’m not using jquery but modifier i have created.

I have a list of elements which are sortable by a drag n drop action, each element can be deleted.

<div {{sortable items=choicesList }}>
	{{#each choicesList as |choice }}
		<div {{draggable data=choice }}>
			{{choice.text}}
		</div>
		<Btn @onClick={{action "deleteChoice" question choice}}>DELETE</Btn>
	{{/each}}
</div>

deleteChoice(question, choice) {
	question.get('choices').removeObject(choice);
}

Deleting element works perfectly fine as long as it has not been moved in an other place.

Moving an element is handled by the sortable modifier which basically find the correct spot on the DOM and move the dragged element : this.element.insertBefore(draggingElement, nextSibling); In addition the original array of data is sorted (which does not trigger a new render).

When i try to remove the moved element, the action is correctly called and the element is removed from the array, the modifier is destroyed , but the element is still there in the DOM (no longer draggable because of the modifier destruction)

I don’t know the ember internals, but it’s almost like it ignores the DOM element it didn’t draw. It seems that on a delete without a prior sorting action it simply delete the element and do not redraw the all list.

It feels like ember has virtual Dom which is no longer in sync with the actual dom

Is there something i can do when i move the dom element to tell ember this element is still part of the list and should be removed from the DOM if necessary ?

Thanks :slight_smile:

2

I am by no means an expert on Ember’s internal rendering…but I don’t think Ember is designed to work with manually manipulating the DOM.

Rather than insertBefore(elem, nextSibling) onDrop, have you tried mutating the array ?

choices.removeObject(choice), choices.insertAt(choice, newIndex).

This should cause ember to re-render the {{each}} in the correct order, and I think should appropriately move the DOM node rather than removing it and adding a new (duplicate) one.

3

fwiw, no frontend framework is designed to work well with other tools manipulating the DOM under control of the frontend framework.

In general tho, drag’n’drop can get pretty complicated – any reason to not use

4

That’s more or less my alternative currently.

On drop , i remove the element from the dom and then force a rerender of the loop by reassigning the array. That’s not very pretty and i was wondering if ember had other mechanism to handle this more properly.