Skip to content

Commit

Permalink
#156: * filter-method
Browse files Browse the repository at this point in the history
  • Loading branch information
RubaXa committed Dec 8, 2014

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 81748a5 commit 846007e
Showing 3 changed files with 44 additions and 31 deletions.
39 changes: 23 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -136,6 +136,29 @@ You can also define whether lists can give away, give and keep a copy (`clone`),
---


#### `filter` option


```js
Sortable.create(list, {
filter: ".js-remove, .js-edit",
onFilter: function (evt) {
var item = el.item;

if (Sortable.utils.is(evt.target, ".js-remove")) { // Click on remove button
el.parentNode.removeChild(el); // remove sortable item
}
else if (Sortable.utils.is(evt.target, ".js-edit")) { // Click on edit link
// ...
}
}
})
```


---


<a name="ng"></a>
### Support AngularJS
Include [ng-sortable.js](ng-sortable.js)
@@ -184,22 +207,6 @@ Get or set the option.
##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

```js
var editableList = new Sortable(list, {
filter: ".js-remove, .js-edit",
onFilter: function (evt) {
var el = editableList.closest(evt.target); // list item

if (editableList.closest(evt.item, ".js-remove")) { // Click on remove button
el.parentNode.removeChild(el); // remove sortable item
}
else if (editableList.closest(evt.item, ".js-edit")) { // Click on edit link
// ...
}
}
})
```


##### toArray():`String[]`
Serializes the sortable's item `data-id`'s into an array of string.
19 changes: 13 additions & 6 deletions Sortable.js
Original file line number Diff line number Diff line change
@@ -182,18 +182,22 @@

// Check filter
if (typeof filter === 'function') {
if (filter.call(this, target, this)) {
_dispatchEvent(el, 'filter', target, undefined, startIndex);
if (filter.call(this, evt, target, this)) {
_dispatchEvent(originalTarget, 'filter', target, el, startIndex);
return; // cancel dnd
}
}
else if (filter) {
filter = filter.split(',').filter(function (criteria) {
return _closest(target, criteria.trim(), el);
filter = filter.split(',').some(function (criteria) {
criteria = _closest(originalTarget, criteria.trim(), el);

if (criteria) {
_dispatchEvent(criteria, 'filter', target, el, startIndex);
return true;
}
});

if (filter.length) {
_dispatchEvent(originalTarget, 'filter', target, undefined, startIndex);
return; // cancel dnd
}
}
@@ -670,7 +674,7 @@
}


function _closest(el, selector, ctx) {
function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
if (selector === '*') {
return el;
}
@@ -823,6 +827,9 @@
css: _css,
find: _find,
bind: _bind,
is: function (el, selector) {
return !!_closest(el, selector, el);
},
closest: _closest,
toggleClass: _toggleClass,
dispatchEvent: _dispatchEvent,
17 changes: 8 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
@@ -276,7 +276,7 @@ <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browser
}


new Sortable(foo, {
Sortable.create(foo, {
group: "words",
animation: 150,
store: {
@@ -297,7 +297,7 @@ <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browser
});


new Sortable(bar, {
Sortable.create(bar, {
group: "words",
animation: 150,
onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
@@ -308,19 +308,18 @@ <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browser
});


new Sortable(multi, {
Sortable.create(multi, {
animation: 150,
draggable: '.tile',
handle: '.tile__name'
});


var editableList = new Sortable(editable, {
var editableList = Sortable.create(editable, {
animation: 150,
filter: '.js-remove',
onFilter: function (evt) {
var el = editableList.closest(evt.item);
el && el.parentNode.removeChild(el);
evt.item.parentNode.removeChild(evt.item);
}
});

@@ -338,7 +337,7 @@ <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browser


[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
new Sortable(el, {
Sortable.create(el, {
group: 'photo',
animation: 150
});
@@ -359,14 +358,14 @@ <h1 data-force="40" data-force-y="2.5">The JavaScript library for modern browser
pull: false,
put: true
}].forEach(function (groupOpts, i) {
new Sortable(document.getElementById('advanced-' + (i + 1)), {
Sortable.create(document.getElementById('advanced-' + (i + 1)), {
sort: (i != 1),
group: groupOpts,
animation: 150
});
});

new Sortable(document.getElementById('handle-1'), {
Sortable.create(document.getElementById('handle-1'), {
handle: '.drag-handle',
animation: 150
});

0 comments on commit 846007e

Please sign in to comment.