Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose old & new element index on drag&drop #154

Merged
merged 1 commit into from
Dec 8, 2014
Merged

Expose old & new element index on drag&drop #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 24 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ You can use any element for the list and its elements, not just `ul`/`li`. Here
### Options
```js
var sortable = new Sortable(el, {
group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] }
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
sort: true, // sorting inside list
disabled: false, // Disables the sortable if set to true.
store: null, // @see Store
Expand All @@ -52,32 +52,42 @@ var sortable = new Sortable(el, {
dataTransfer.setData('Text', dragEl.textContent);
},

onStart: function (/*Event*/evt) { /* dragging started*/ },
onEnd: function (/*Event*/evt) { /* dragging ended */ },
// dragging started
onStart: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},

// dragging ended
onEnd: function (/**Event*/evt) {
evt.oldIndex; // element's old index within parent
evt.newIndex; // element's new index within parent
},

// Element is dropped into the list from another list
onAdd: function (/*Event*/evt){
var itemEl = evt.item; // dragged HTMLElement
itemEl.from; // previous list
onAdd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
itemEl.from; // previous list
// + indexes from onEnd
},

// Changed sorting within list
onUpdate: function (/*Event*/evt){
var itemEl = evt.item; // dragged HTMLElement
onUpdate: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
// + indexes from onEnd
},

// Called by any change to the list (add / update / remove)
onSort: function (/*Event*/evt){
var itemEl = evt.item; // dragged HTMLElement
onSort: function (/**Event*/evt) {
// same properties as onUpdate
},

// Element is removed from the list into another list
onRemove: function (/*Event*/evt){
var itemEl = evt.item; // dragged HTMLElement
onRemove: function (/**Event*/evt) {
// same properties as onUpdate
},

onFilter: function (/*Event*/evt){
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
onFilter: function (/**Event*/evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
}
});
```
Expand Down
45 changes: 33 additions & 12 deletions Sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"use strict";

var dragEl,
startIndex,
ghostEl,
cloneEl,
rootEl,
Expand All @@ -47,12 +48,14 @@

_silent = false,

_dispatchEvent = function (rootEl, name, targetEl, fromEl) {
_dispatchEvent = function (rootEl, name, targetEl, fromEl, startIndex, newIndex) {
var evt = document.createEvent('Event');

evt.initEvent(name, true, true);
evt.item = targetEl || rootEl;
evt.from = fromEl || rootEl;
if (startIndex !== undefined) evt.oldIndex = startIndex;
if (newIndex !== undefined) evt.newIndex = newIndex;

rootEl.dispatchEvent(evt);
},
Expand Down Expand Up @@ -163,6 +166,8 @@
el = this.el,
filter = options.filter;

// get the index of the dragged element within its parent
startIndex = _index(target);

if (evt.type === 'mousedown' && evt.button !== 0 || options.disabled) {
return; // only left button or enabled
Expand Down Expand Up @@ -245,7 +250,7 @@
}


_dispatchEvent(dragEl, 'start');
_dispatchEvent(dragEl, 'start', undefined, undefined, startIndex);


if (activeGroup.pull == 'clone') {
Expand Down Expand Up @@ -502,28 +507,31 @@
ghostEl && ghostEl.parentNode.removeChild(ghostEl);

if (dragEl) {
// get the index of the dragged element within its parent
var newIndex = _index(dragEl);
_disableDraggable(dragEl);
_toggleClass(dragEl, this.options.ghostClass, false);

if (!rootEl.contains(dragEl)) {
_dispatchEvent(dragEl, 'sort', dragEl, dragEl.parentNode);
_dispatchEvent(rootEl, 'sort', dragEl);
// drag from one list and drop into another
_dispatchEvent(dragEl, 'sort', dragEl, dragEl.parentNode, startIndex, newIndex);
_dispatchEvent(rootEl, 'sort', dragEl, undefined, startIndex, newIndex);

// Add event
_dispatchEvent(dragEl, 'add', dragEl, rootEl);
_dispatchEvent(dragEl, 'add', dragEl, rootEl, startIndex, newIndex);

// Remove event
_dispatchEvent(rootEl, 'remove', dragEl);
_dispatchEvent(rootEl, 'remove', dragEl, undefined, startIndex, newIndex);
}
else if (dragEl.nextSibling !== nextEl) {
// Update event
_dispatchEvent(dragEl, 'update');
_dispatchEvent(dragEl, 'sort');
// drag & drop within the same list
_dispatchEvent(dragEl, 'update', undefined, undefined, startIndex, newIndex);
_dispatchEvent(dragEl, 'sort', undefined, undefined, startIndex, newIndex);

cloneEl && cloneEl.parentNode.removeChild(cloneEl);
}

_dispatchEvent(rootEl, 'end');
_dispatchEvent(rootEl, 'end', undefined, undefined, startIndex, newIndex);
}

// Set NULL
Expand Down Expand Up @@ -793,6 +801,18 @@
return sum.toString(36);
}

/**
* Returns the index of an element within its parent
* @param el
* @returns {HTMLElement}
*/
function _index(/**HTMLElement*/el) {
var index = 0;
while ((el = el.previousElementSibling)) {
index++;
}
return index;
}

// Export utils
Sortable.utils = {
Expand All @@ -803,11 +823,12 @@
bind: _bind,
closest: _closest,
toggleClass: _toggleClass,
dispatchEvent: _dispatchEvent
dispatchEvent: _dispatchEvent,
index: _index
};


Sortable.version = '0.7.1';
Sortable.version = '0.7.2';


/**
Expand Down
Loading