Browse Source

Determine the correct target before onFilter

Fix #156 and also returning correct indexes if a drag handle is present (#154).
pull/157/head
Dan Dascalescu 10 years ago
parent
commit
81748a5828
  1. 3
      README.md
  2. 30
      Sortable.js

3
README.md

@ -86,6 +86,7 @@ var sortable = new Sortable(el, {
// same properties as onUpdate // same properties as onUpdate
}, },
// Attempt to drag a filtered element
onFilter: function (/**Event*/evt) { onFilter: function (/**Event*/evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
} }
@ -187,7 +188,7 @@ For each element in the set, get the first element that matches the selector by
var editableList = new Sortable(list, { var editableList = new Sortable(list, {
filter: ".js-remove, .js-edit", filter: ".js-remove, .js-edit",
onFilter: function (evt) { onFilter: function (evt) {
var el = editableList.closest(evt.item); // list item var el = editableList.closest(evt.target); // list item
if (editableList.closest(evt.item, ".js-remove")) { // Click on remove button if (editableList.closest(evt.item, ".js-remove")) { // Click on remove button
el.parentNode.removeChild(el); // remove sortable item el.parentNode.removeChild(el); // remove sortable item

30
Sortable.js

@ -162,21 +162,28 @@
_onTapStart: function (/**Event|TouchEvent*/evt) { _onTapStart: function (/**Event|TouchEvent*/evt) {
var touch = evt.touches && evt.touches[0], var touch = evt.touches && evt.touches[0],
target = (touch || evt).target, target = (touch || evt).target,
originalTarget = target,
options = this.options, options = this.options,
el = this.el, el = this.el,
filter = options.filter; 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) { if (evt.type === 'mousedown' && evt.button !== 0 || options.disabled) {
return; // only left button or enabled return; // only left button or enabled
} }
if (options.handle) {
target = _closest(target, options.handle, el);
}
target = _closest(target, options.draggable, el);
// get the index of the dragged element within its parent
startIndex = _index(target);
// Check filter // Check filter
if (typeof filter === 'function') { if (typeof filter === 'function') {
if (filter.call(this, target, this)) { if (filter.call(this, target, this)) {
_dispatchEvent(el, 'filter', target); _dispatchEvent(el, 'filter', target, undefined, startIndex);
return; // cancel dnd return; // cancel dnd
} }
} }
@ -186,17 +193,11 @@
}); });
if (filter.length) { if (filter.length) {
_dispatchEvent(el, 'filter', target); _dispatchEvent(originalTarget, 'filter', target, undefined, startIndex);
return; // cancel dnd return; // cancel dnd
} }
} }
if (options.handle) {
target = _closest(target, options.handle, el);
}
target = _closest(target, options.draggable, el);
// IE 9 Support // IE 9 Support
if (target && evt.type == 'selectstart') { if (target && evt.type == 'selectstart') {
if (target.tagName != 'A' && target.tagName != 'IMG') { if (target.tagName != 'A' && target.tagName != 'IMG') {
@ -695,7 +696,7 @@
} }
function _globalDragOver(evt) { function _globalDragOver(/**Event*/evt) {
evt.dataTransfer.dropEffect = 'move'; evt.dataTransfer.dropEffect = 'move';
evt.preventDefault(); evt.preventDefault();
} }
@ -804,11 +805,12 @@
/** /**
* Returns the index of an element within its parent * Returns the index of an element within its parent
* @param el * @param el
* @returns {HTMLElement} * @returns {number}
* @private
*/ */
function _index(/**HTMLElement*/el) { function _index(/**HTMLElement*/el) {
var index = 0; var index = 0;
while ((el = el.previousElementSibling)) { while (el && (el = el.previousElementSibling)) {
index++; index++;
} }
return index; return index;

Loading…
Cancel
Save