Browse files

Added spec and documentation

  • Loading branch information...
1 parent 5184039 commit de29f875d9826f8eae774391ef8807db701de121 @camwest camwest committed Feb 7, 2013
Showing with 155 additions and 17 deletions.
  1. +28 −0 README.md
  2. +14 −13 index.js
  3. +113 −4 test/drag_sort_spec.js
View
28 README.md
@@ -0,0 +1,28 @@
+drag_sort
+
+=======
+
+Features
+--------
+
+The simplest HTML5 Drag & Drop Library
+
+Usage
+-----
+
+```
+var DragSort = require('dragSort');
+
+var watcher = DragSort.init(element, '.child_class', function(oldIndex, newIndex) {
+ console.log(oldIndex);
+ console.log(newIndex);
+});
+
+
+watcher.destroy();
+```
+
+Notes
+-----
+* Use need to specify sortable=true on the elements you want sortable
+* Only works properly with horizontal sorting
View
27 index.js
@@ -11,21 +11,10 @@ var DragSort = {
var dataTransfer = e.originalEvent.dataTransfer;
dataTransfer.effectAllowed = 'move';
- $(dragSource).css({ opacity: 0.4 });
+ $(dragSource).addClass('dragging');
oldIndex = $(dragSource).index();
});
- $(element).on('dragend.dragSort', childClass, function(e) {
- newIndex = $(dragSource).index();
- $(dragSource).css({ opacity: 1 });
-
- if (oldIndex == newIndex) {
- return;
- }
-
- callback(oldIndex, newIndex);
- });
-
$(element).on('dragover.dragSort', childClass, function(e) {
e.originalEvent.preventDefault();
@@ -48,6 +37,18 @@ var DragSort = {
}
});
+ $(element).on('dragend.dragSort', childClass, function(e) {
+ newIndex = $(dragSource).index();
+
+ $(dragSource).removeClass('dragging');
+
+ if (oldIndex == newIndex) {
+ return;
+ }
+
+ callback(oldIndex, newIndex);
+ });
+
return {
destroy: function() {
$(element).off('.dragSort');
@@ -56,4 +57,4 @@ var DragSort = {
}
}
-module.export = DragSort;
+module.exports = DragSort;
View
117 test/drag_sort_spec.js
@@ -2,17 +2,126 @@ describe('DragSort', function() {
var $ = require('component-jquery');
var expect = chai.expect;
- var element;
+ var dragSort = require('drag_sort');
+ var list, originalEvent;
beforeEach(function() {
+ var html = '<ul id="list" style="position: absolute; left: 0; top: 0; width: 120px; list-style-type: 0; padding: 0; margin: 0">' +
+ '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 2</li>' +
+ '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 1</li>' +
+ '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 3</li>' +
+ '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 4</li>' +
+ '</ul>';
+
+ $(document.body).append(html);
+ list = $('#list');
});
afterEach(function() {
+ list.remove();
});
- it('works', function() {
- expect(false).to.equal(true);
- });
+ function dragStart(element) {
+ var e = $.Event('dragstart');
+ e.originalEvent = { dataTransfer: {} };
+ element.trigger(e);
+ }
+
+ function dragOver(target, clientX) {
+ var e = $.Event('dragover');
+ e.originalEvent = { preventDefault: sinon.spy(), clientX: clientX };
+ target.trigger(e);
+ }
+
+ function dragEnd(element) {
+ element.trigger('dragend');
+ }
+
+ describe('when the last item is draggedStarted', function() {
+ var dragSpy, dragSource, watcher;
+
+ beforeEach(function() {
+ dragSpy = sinon.spy();
+ watcher = dragSort.init(list, '.list_item', dragSpy);
+
+ dragSource = $('.list_item:eq(3)');
+ dragStart(dragSource);
+ });
+
+ it('adds the "dragging" class to the dragSource', function() {
+ expect(dragSource.hasClass('dragging')).to.equal(true);
+ });
+
+ describe('when destroying the dragSort', function() {
+ beforeEach(function() {
+ watcher.destroy();
+
+ var dragTarget = $('.list_item:eq(0)');
+ dragOver(dragTarget, 0);
+ dragEnd(dragSource);
+ });
+
+ it('does not respond to drag events anymore', function() {
+ expect(dragSpy.called).to.equal(false);
+ });
+
+ });
+ describe('when it is dragged to the left of the first item', function() {
+ var dragTarget;
+ beforeEach(function() {
+ dragTarget = $('.list_item:eq(0)');
+ dragOver(dragTarget, 0);
+ });
+
+ it('puts the dragSource in the first position', function() {
+ expect(dragSource.index()).to.equal(0);
+ });
+
+ it('pushes the dragTarget over one', function() {
+ expect(dragTarget.index()).to.equal(1);
+ });
+
+ describe('when dragging ends', function() {
+ beforeEach(function() {
+ dragEnd(dragSource);
+ });
+
+ it('removes dragging class', function() {
+ expect(dragSource.hasClass('dragging')).to.equal(false);
+ });
+
+ it('executes the callback passing the oldIndex and newIndex', function() {
+ expect(dragSpy.calledWith(3, 0)).to.equal(true);
+ });
+ });
+ });
+
+ describe('when it is dragged to the right of the first item', function() {
+ var dragTarget;
+
+ beforeEach(function() {
+ dragTarget = $('.list_item:eq(0)');
+ dragOver(dragTarget, 20);
+ });
+
+ it('puts the dragSource to the right of the first item', function() {
+ expect(dragSource.index()).to.equal(1);
+ });
+ });
+
+ describe('when it is dragged over itself', function() {
+ var dragTarget;
+
+ beforeEach(function() {
+ dragTarget = dragSource;
+ dragOver(dragTarget, 130);
+ });
+
+ it('keeps the same index', function() {
+ expect(dragSource.index()).to.equal(3);
+ });
+ });
+ });
});

0 comments on commit de29f87

Please sign in to comment.