Browse Source

- CustomEvents; * evt.detail -> evt.item

pull/10/head
RubaXa 11 years ago
parent
commit
6619d05703
  1. 6
      README.md
  2. 32
      Sortable.js
  3. 4
      Sortable.min.js
  4. 16
      index.html
  5. 4
      package.json

6
README.md

@ -32,15 +32,15 @@ new Sortable(elem, {
ghostClass: "sortable-ghost", ghostClass: "sortable-ghost",
onAdd: function (evt){ onAdd: function (evt){
var itemEl = ui.detail; var itemEl = evt.item;
}, },
onUpdate: function (evt){ onUpdate: function (evt){
var itemEl = ui.detail; // the current dragged HTMLElement var itemEl = evt.item; // the current dragged HTMLElement
}, },
onRemove: function (evt){ onRemove: function (evt){
var itemEl = ui.detail; var itemEl = evt.item;
} }
}); });
``` ```

32
Sortable.js

@ -38,17 +38,12 @@
, parseInt = win.parseInt , parseInt = win.parseInt
, _silent = false , _silent = false
, Event = (function (){ , _createEvent = function (event/**String*/, item/**HTMLElement*/){
function CustomEvent(event, params){ var evt = document.createEvent('Event');
var evt = document.createEvent('CustomEvent'); evt.initEvent(event, true, true);
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); evt.item = item;
return evt; return evt;
} }
CustomEvent.prototype = win.CustomEvent.prototype;
return CustomEvent;
})()
, noop = function (){} , noop = function (){}
, slice = [].slice , slice = [].slice
@ -132,6 +127,7 @@
tapEvt = evt; tapEvt = evt;
target.draggable = true; target.draggable = true;
// Disable "draggable" // Disable "draggable"
_find(target, 'a', _disableDraggable); _find(target, 'a', _disableDraggable);
_find(target, 'img', _disableDraggable); _find(target, 'img', _disableDraggable);
@ -262,11 +258,11 @@
, target = _closest(evt.target, this.options.draggable, el) , target = _closest(evt.target, this.options.draggable, el)
; ;
if( target[expando] === void 0 ){ if( target && target[expando] === void 0 ){
if( el.children.length === 0 ){ if( el.children.length === 0 ){
el.appendChild(dragEl); el.appendChild(dragEl);
} }
else if( target && (target !== dragEl) ){ else if( target !== dragEl ){
if( lastEl !== target ){ if( lastEl !== target ){
lastEl = target; lastEl = target;
lastCSS = _css(target) lastCSS = _css(target)
@ -327,20 +323,18 @@
} }
if( dragEl ){ if( dragEl ){
var opts = { bubbles: true, cancelable: true, detail: dragEl };
_toggleClass(dragEl, this.options.ghostClass, false); _toggleClass(dragEl, this.options.ghostClass, false);
if( !rootEl.contains(dragEl) ){ if( !rootEl.contains(dragEl) ){
// Remove event // Remove event
rootEl.dispatchEvent(new Event('remove', opts)); rootEl.dispatchEvent(_createEvent('remove', dragEl));
// Add event // Add event
dragEl.dispatchEvent(new Event('add', opts)); dragEl.dispatchEvent(_createEvent('add', dragEl));
} }
else if( dragEl.nextSibling !== nextEl ){ else if( dragEl.nextSibling !== nextEl ){
// Update event // Update event
dragEl.dispatchEvent(new Event('update', opts)); dragEl.dispatchEvent(_createEvent('update', dragEl));
} }
} }
@ -500,7 +494,7 @@
}; };
Sortable.version = '0.1.3'; Sortable.version = '0.1.4';
// Export // Export
return Sortable; return Sortable;

4
Sortable.min.js vendored

File diff suppressed because one or more lines are too long

16
index.html

@ -311,16 +311,16 @@ sort.destroy();
new Sortable(foo, { new Sortable(foo, {
group: "words", group: "words",
onAdd: function (evt){ console.log('onAdd.foo:', evt.detail); }, onAdd: function (evt){ console.log('onAdd.foo:', evt.item); },
onUpdate: function (evt){ console.log('onUpdate.foo:', evt.detail); }, onUpdate: function (evt){ console.log('onUpdate.foo:', evt.item); },
onRemove: function (evt){ console.log('onRemove.foo:', evt.detail); } onRemove: function (evt){ console.log('onRemove.foo:', evt.item); }
}); });
new Sortable(bar, { new Sortable(bar, {
group: "words", group: "words",
onAdd: function (evt){ console.log('onAdd.bar:', evt.detail); }, onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
onUpdate: function (evt){ console.log('onUpdate.bar:', evt.detail); }, onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); },
onRemove: function (evt){ console.log('onRemove.bar:', evt.detail); } onRemove: function (evt){ console.log('onRemove.bar:', evt.item); }
}); });
@ -366,7 +366,7 @@ sort.destroy();
<!-- Parallax --> <!-- Parallax -->
<script> <script>
(function (){ (function (){
var x, y; var x, y, reqAnimFrame = window.requestAnimationFrame || function (fn){ setTimeout(fn, 1000/60); };
var items = [].slice.call(document.querySelectorAll('.layer')).map(function (el){ var items = [].slice.call(document.querySelectorAll('.layer')).map(function (el){
var rect = el.getBoundingClientRect(); var rect = el.getBoundingClientRect();
@ -410,7 +410,7 @@ sort.destroy();
}); });
} }
requestAnimationFrame(_loop); reqAnimFrame(_loop);
})(); })();
})(); })();
</script> </script>

4
package.json

@ -1,7 +1,7 @@
{ {
"name": "sortable", "name": "sortable",
"exportName": "Sortable", "exportName": "Sortable",
"version": "0.1.3", "version": "0.1.4",
"devDependencies": { "devDependencies": {
"grunt": "*", "grunt": "*",
"grunt-version": "*", "grunt-version": "*",
@ -16,7 +16,7 @@
"type": "git", "type": "git",
"url": "git://github.com/rubaxa/Sortable.git" "url": "git://github.com/rubaxa/Sortable.git"
}, },
"keywords": ["sortable", "reorder"], "keywords": ["sortable", "reorder", "drag"],
"author": "Konstantin Lebedev <ibnRubaXa@gmail.com>", "author": "Konstantin Lebedev <ibnRubaXa@gmail.com>",
"license": "MIT" "license": "MIT"
} }

Loading…
Cancel
Save