-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Closed
Description
So I have the following code in my template and corresponding javascript. My issue is that it seems that after moving a productField
to a new position in the list, the update is sent to the server, which causes the DOM to reload, then Sortable "remembers" the change that was made and almost re-applies it. Causing the ordering on screen to be wrong. ie. the productFields
aren't in index
order.
Is there a way I can "reset" the Sortable internal state back to "unsorted"?
Or is there a better way to achieve this!?
...
<ul class="list-group" id="selected-fields">
{{#each productFieldDefinitions}}
<li class="list-group-item">
{{displayName}}
<span class="badge">
<i class="fa fa-bars drag-handle"></i>
</span>
</li>
{{/each}}
</ul>
...
var el = document.getElementById('selected-fields');
Sortable.create(el, {
group: {
name: "fields",
pull: false,
put: true
},
sort: true,
handle: '.drag-handle',
draggable: '.list-group-item',
onUpdate: function (event) {
var productField = Blaze.getData(event.item);
var orderedFields = _.sortBy(instance.data.category.productFields, 'index');
// Remove the field from it's old position
orderedFields.splice(event.oldIndex, 1);
// Do we now need to shift the new index?
var newIndex = event.newIndex;
if (event.oldIndex < event.newIndex) {
newIndex--;
}
// Insert the field into it's new position
orderedFields.splice(newIndex, 0, productField);
// Re-index the array
_.each(orderedFields, function (field, index) {
field.index = index;
});
// Save the update to the server
ProductCategories.update({
_id: instance.data.category._id
}, {
$set: { productFields: instance.data.category.productFields }
}, function (error, result) {
if (!!error) {
console.log(error);
return;
}
});
}
});
Template.categoryEditor.helpers({
productFieldDefinitions: function () {
return _.sortBy(Template.instance().data.category.productFields, 'index') || [];
}
});
Metadata
Metadata
Assignees
Labels
No labels