From 66ef7bfc53fa53a10fc1f5300a7b2d11a7ac8cbd Mon Sep 17 00:00:00 2001 From: Dan Dascalescu Date: Wed, 3 Dec 2014 23:26:03 -0800 Subject: [PATCH 1/4] Demo and documentation for ghostClass --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 4c0e3b9..e0acae7 100644 --- a/README.md +++ b/README.md @@ -39,14 +39,14 @@ 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] } - sort: true, // sorting inside list - store: null, // @see Store - animation: 150, // ms, animation speed moving items when sorting, `0` — without animation - handle: ".my-handle", // Drag handle selector within list items - filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function) - draggable: ".item", // Specifies which items inside the element should be sortable - ghostClass: "sortable-ghost", + group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] } + sort: true, // sorting inside list + store: null, // @see Store + animation: 150, // ms, animation speed moving items when sorting, `0` — without animation + handle: ".my-handle", // Drag handle selector within list items + filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function) + draggable: ".item", // Specifies which items inside the element should be sortable + ghostClass: "sortable-ghost", // Class name for the drop placeholder. See http://jsbin.com/luxero/3 setData: function (dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, From ff9320da008adad205778db14ba71315850305b3 Mon Sep 17 00:00:00 2001 From: Dan Dascalescu Date: Thu, 4 Dec 2014 01:15:48 -0800 Subject: [PATCH 2/4] Fix more README typos --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index e0acae7..2bfb120 100644 --- a/README.md +++ b/README.md @@ -44,39 +44,39 @@ var sortable = new Sortable(el, { store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".my-handle", // Drag handle selector within list items - filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function) + filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) draggable: ".item", // Specifies which items inside the element should be sortable - ghostClass: "sortable-ghost", // Class name for the drop placeholder. See http://jsbin.com/luxero/3 + ghostClass: "sortable-ghost", // Class name for the drop placeholder - jsbin.com/luxero/3 setData: function (dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent); }, - onStart: function (/**Event*/evt) { /* dragging */ }, - onEnd: function (/**Event*/evt) { /* dragging */ }, + onStart: function (/*Event*/evt) { /* dragging started*/ }, + onEnd: function (/*Event*/evt) { /* dragging ended */ }, // Element is dropped into the list from another list - onAdd: function (/**Event*/evt){ + onAdd: function (/*Event*/evt){ var itemEl = evt.item; // dragged HTMLElement itemEl.from; // previous list }, // Changed sorting within list - onUpdate: function (/**Event*/evt){ + onUpdate: function (/*Event*/evt){ var itemEl = evt.item; // dragged HTMLElement }, // Called by any change to the list (add / update / remove) - onSort: function (/**Event*/evt){ + onSort: function (/*Event*/evt){ var itemEl = evt.item; // dragged HTMLElement }, // Element is removed from the list into another list - onRemove: function (/**Event*/evt){ + onRemove: function (/*Event*/evt){ var itemEl = evt.item; // dragged HTMLElement }, - onFilter: function (/**Event*/evt){ - var itemEl = evt.item; // HTMLElement on which was `mousedown|tapstart` event. + onFilter: function (/*Event*/evt){ + var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. } }); ``` From f24df5cbcbfa9ea7d711136cd57732aa12f7b567 Mon Sep 17 00:00:00 2001 From: Dan Dascalescu Date: Thu, 4 Dec 2014 02:15:04 -0800 Subject: [PATCH 3/4] README typo fix --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2bfb120..77283d8 100644 --- a/README.md +++ b/README.md @@ -227,7 +227,7 @@ Sortable.create(el, { /** * Get the order of elements. Called once during initialization. * @param {Sortable} sortable - * @retruns {Array} + * @returns {Array} */ get: function (sortable) { var order = localStorage.getItem(sortable.options.group); @@ -235,7 +235,7 @@ Sortable.create(el, { }, /** - * Save the order of elements. Called every time at the drag end. + * Save the order of elements. Called onEnd (when the item is dropped). * @param {Sortable} sortable */ set: function (sortable) { From 0c268ad4f1eaddedf53cc137e9199a825e1934e9 Mon Sep 17 00:00:00 2001 From: Lebedev Konstantin Date: Fri, 5 Dec 2014 09:35:01 +0300 Subject: [PATCH 4/4] + `put` demo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 77283d8..09a59cb 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ You can also define whether lists can give away, give and keep a copy (`clone`), * name: `String` — group name * pull: `true|false|'clone'` — ability to move from the list. `clone` — copy the item, rather than move. - * put: `true|false|["foo", "bar"]` — whether elements can be added from other lists, or an array of group names from which elements can be taken + * put: `true|false|["foo", "bar"]` — whether elements can be added from other lists, or an array of group names from which elements can be taken. Demo: http://jsbin.com/naduvo/2/edit?html,js,output ---