How to use the sortablejs.utils function in sortablejs
To help you get started, we’ve selected a few sortablejs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
gchq / CyberChef / src / web / RecipeWaiter.js View on Github 
dataTransfer.setData("Text", dragEl.querySelector(".arg-title").textContent);
},
onEnd: function(evt) {
if (this.removeIntent) {
evt.item.remove();
evt.target.dispatchEvent(this.manager.operationremove);
}
}.bind(this),
onSort: function(evt) {
if (evt.from.id === "rec-list") {
document.dispatchEvent(this.manager.statechange);
}
}.bind(this)
});
Sortable.utils.on(recList, "dragover", function() {
this.removeIntent = false;
}.bind(this));
Sortable.utils.on(recList, "dragleave", function() {
this.removeIntent = true;
this.app.progress = 0;
}.bind(this));
Sortable.utils.on(recList, "touchend", function(e) {
const loc = e.changedTouches[0];
const target = document.elementFromPoint(loc.clientX, loc.clientY);
this.removeIntent = !recList.contains(target);
}.bind(this));
// Favourites categoryif (evt.from.id === "rec-list") {
document.dispatchEvent(this.manager.statechange);
}
}.bind(this)
});
Sortable.utils.on(recList, "dragover", function() {
this.removeIntent = false;
}.bind(this));
Sortable.utils.on(recList, "dragleave", function() {
this.removeIntent = true;
this.app.progress = 0;
}.bind(this));
Sortable.utils.on(recList, "touchend", function(e) {
const loc = e.changedTouches[0];
const target = document.elementFromPoint(loc.clientX, loc.clientY);
this.removeIntent = !recList.contains(target);
}.bind(this));
// Favourites category
document.querySelector("#categories a").addEventListener("dragover", this.favDragover.bind(this));
document.querySelector("#categories a").addEventListener("dragleave", this.favDragleave.bind(this));
document.querySelector("#categories a").addEventListener("drop", this.favDrop.bind(this));
};private attachListeners() {
Sortable.utils.on(this.element, "add", event => this.dispatch("sortable-add", event));
Sortable.utils.on(this.element, "choose", event => this.dispatch("sortable-choose", event));
Sortable.utils.on(this.element, "end", event => this.dispatch("sortable-end", event));
Sortable.utils.on(this.element, "filter", event => this.dispatch("sortable-filter", event));
Sortable.utils.on(this.element, "move", event => this.dispatch("sortable-move", event));
Sortable.utils.on(this.element, "remove", event => this.dispatch("sortable-remove", event));
Sortable.utils.on(this.element, "sort", event => this.dispatch("sortable-sort", event));
Sortable.utils.on(this.element, "start", event => this.dispatch("sortable-start", event));
Sortable.utils.on(this.element, "update", event => this.dispatch("sortable-update", event));
}el.parentNode.removeChild(el);
}
},
onEnd: function(evt) {
if (this.removeIntent) {
$(evt.item).popover("destroy");
evt.item.remove();
}
}.bind(this),
});
Sortable.utils.on(editFavouritesList, "dragleave", function() {
this.removeIntent = true;
}.bind(this));
Sortable.utils.on(editFavouritesList, "dragover", function() {
this.removeIntent = false;
}.bind(this));
$("#edit-favourites-list [data-toggle=popover]").popover();
$("#favourites-modal").modal();
};onFilter: function (evt) {
const el = editableList.closest(evt.item);
if (el && el.parentNode) {
$(el).popover("destroy");
el.parentNode.removeChild(el);
}
},
onEnd: function(evt) {
if (this.removeIntent) {
$(evt.item).popover("destroy");
evt.item.remove();
}
}.bind(this),
});
Sortable.utils.on(editFavouritesList, "dragleave", function() {
this.removeIntent = true;
}.bind(this));
Sortable.utils.on(editFavouritesList, "dragover", function() {
this.removeIntent = false;
}.bind(this));
$("#edit-favourites-list [data-toggle=popover]").popover();
$("#favourites-modal").modal();
};private attachListeners() {
Sortable.utils.on(this.element, "add", event => this.dispatch("sortable-add", event));
Sortable.utils.on(this.element, "choose", event => this.dispatch("sortable-choose", event));
Sortable.utils.on(this.element, "end", event => this.dispatch("sortable-end", event));
Sortable.utils.on(this.element, "filter", event => this.dispatch("sortable-filter", event));
Sortable.utils.on(this.element, "move", event => this.dispatch("sortable-move", event));
Sortable.utils.on(this.element, "remove", event => this.dispatch("sortable-remove", event));
Sortable.utils.on(this.element, "sort", event => this.dispatch("sortable-sort", event));
Sortable.utils.on(this.element, "start", event => this.dispatch("sortable-start", event));
Sortable.utils.on(this.element, "update", event => this.dispatch("sortable-update", event));
}SortableCustomAttribute.prototype.attachListeners = function () {
var _this = this;
Sortable.utils.on(this.element, "add", function (event) { return _this.dispatch("sortable-add", event); });
Sortable.utils.on(this.element, "choose", function (event) { return _this.dispatch("sortable-choose", event); });
Sortable.utils.on(this.element, "end", function (event) { return _this.dispatch("sortable-end", event); });
Sortable.utils.on(this.element, "filter", function (event) { return _this.dispatch("sortable-filter", event); });
Sortable.utils.on(this.element, "move", function (event) { return _this.dispatch("sortable-move", event); });
Sortable.utils.on(this.element, "remove", function (event) { return _this.dispatch("sortable-remove", event); });
Sortable.utils.on(this.element, "sort", function (event) { return _this.dispatch("sortable-sort", event); });
Sortable.utils.on(this.element, "start", function (event) { return _this.dispatch("sortable-start", event); });
Sortable.utils.on(this.element, "update", function (event) { return _this.dispatch("sortable-update", event); });
};
SortableCustomAttribute.prototype.dispatch = function (name, data) {SortableCustomAttribute.prototype.attachListeners = function () {
var _this = this;
Sortable.utils.on(this.element, "add", function (event) { return _this.dispatch("sortable-add", event); });
Sortable.utils.on(this.element, "choose", function (event) { return _this.dispatch("sortable-choose", event); });
Sortable.utils.on(this.element, "end", function (event) { return _this.dispatch("sortable-end", event); });
Sortable.utils.on(this.element, "filter", function (event) { return _this.dispatch("sortable-filter", event); });
Sortable.utils.on(this.element, "move", function (event) { return _this.dispatch("sortable-move", event); });
Sortable.utils.on(this.element, "remove", function (event) { return _this.dispatch("sortable-remove", event); });
Sortable.utils.on(this.element, "sort", function (event) { return _this.dispatch("sortable-sort", event); });
Sortable.utils.on(this.element, "start", function (event) { return _this.dispatch("sortable-start", event); });
Sortable.utils.on(this.element, "update", function (event) { return _this.dispatch("sortable-update", event); });
};
SortableCustomAttribute.prototype.dispatch = function (name, data) {sortablejs
JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
