Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Added spec and documentation

  • Loading branch information...
commit de29f875d9826f8eae774391ef8807db701de121 1 parent 5184039
Cameron Westland camwest authored

Showing 3 changed files with 155 additions and 17 deletions. Show diff stats Hide diff stats

  1. +28 0 README.md
  2. +14 13 index.js
  3. +113 4 test/drag_sort_spec.js
28 README.md
Source Rendered
... ... @@ -0,0 +1,28 @@
  1 +drag_sort
  2 +
  3 +=======
  4 +
  5 +Features
  6 +--------
  7 +
  8 +The simplest HTML5 Drag & Drop Library
  9 +
  10 +Usage
  11 +-----
  12 +
  13 +```
  14 +var DragSort = require('dragSort');
  15 +
  16 +var watcher = DragSort.init(element, '.child_class', function(oldIndex, newIndex) {
  17 + console.log(oldIndex);
  18 + console.log(newIndex);
  19 +});
  20 +
  21 +
  22 +watcher.destroy();
  23 +```
  24 +
  25 +Notes
  26 +-----
  27 +* Use need to specify sortable=true on the elements you want sortable
  28 +* Only works properly with horizontal sorting
27 index.js
@@ -11,21 +11,10 @@ var DragSort = {
11 11 var dataTransfer = e.originalEvent.dataTransfer;
12 12 dataTransfer.effectAllowed = 'move';
13 13
14   - $(dragSource).css({ opacity: 0.4 });
  14 + $(dragSource).addClass('dragging');
15 15 oldIndex = $(dragSource).index();
16 16 });
17 17
18   - $(element).on('dragend.dragSort', childClass, function(e) {
19   - newIndex = $(dragSource).index();
20   - $(dragSource).css({ opacity: 1 });
21   -
22   - if (oldIndex == newIndex) {
23   - return;
24   - }
25   -
26   - callback(oldIndex, newIndex);
27   - });
28   -
29 18 $(element).on('dragover.dragSort', childClass, function(e) {
30 19 e.originalEvent.preventDefault();
31 20
@@ -48,6 +37,18 @@ var DragSort = {
48 37 }
49 38 });
50 39
  40 + $(element).on('dragend.dragSort', childClass, function(e) {
  41 + newIndex = $(dragSource).index();
  42 +
  43 + $(dragSource).removeClass('dragging');
  44 +
  45 + if (oldIndex == newIndex) {
  46 + return;
  47 + }
  48 +
  49 + callback(oldIndex, newIndex);
  50 + });
  51 +
51 52 return {
52 53 destroy: function() {
53 54 $(element).off('.dragSort');
@@ -56,4 +57,4 @@ var DragSort = {
56 57 }
57 58 }
58 59
59   -module.export = DragSort;
  60 +module.exports = DragSort;
117 test/drag_sort_spec.js
@@ -2,17 +2,126 @@ describe('DragSort', function() {
2 2 var $ = require('component-jquery');
3 3 var expect = chai.expect;
4 4
5   - var element;
  5 + var dragSort = require('drag_sort');
  6 + var list, originalEvent;
6 7
7 8 beforeEach(function() {
  9 + var html = '<ul id="list" style="position: absolute; left: 0; top: 0; width: 120px; list-style-type: 0; padding: 0; margin: 0">' +
  10 + '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 2</li>' +
  11 + '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 1</li>' +
  12 + '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 3</li>' +
  13 + '<li class="list_item" style="float:left; width: 30px; height: 30px; list-style-type: none; padding: 0; margin: 0;">Item 4</li>' +
  14 + '</ul>';
  15 +
  16 + $(document.body).append(html);
  17 + list = $('#list');
8 18 });
9 19
10 20 afterEach(function() {
  21 + list.remove();
11 22 });
12 23
13   - it('works', function() {
14   - expect(false).to.equal(true);
15   - });
  24 + function dragStart(element) {
  25 + var e = $.Event('dragstart');
  26 + e.originalEvent = { dataTransfer: {} };
  27 + element.trigger(e);
  28 + }
  29 +
  30 + function dragOver(target, clientX) {
  31 + var e = $.Event('dragover');
  32 + e.originalEvent = { preventDefault: sinon.spy(), clientX: clientX };
  33 + target.trigger(e);
  34 + }
  35 +
  36 + function dragEnd(element) {
  37 + element.trigger('dragend');
  38 + }
  39 +
  40 + describe('when the last item is draggedStarted', function() {
  41 + var dragSpy, dragSource, watcher;
  42 +
  43 + beforeEach(function() {
  44 + dragSpy = sinon.spy();
  45 + watcher = dragSort.init(list, '.list_item', dragSpy);
  46 +
  47 + dragSource = $('.list_item:eq(3)');
  48 + dragStart(dragSource);
  49 + });
  50 +
  51 + it('adds the "dragging" class to the dragSource', function() {
  52 + expect(dragSource.hasClass('dragging')).to.equal(true);
  53 + });
  54 +
  55 + describe('when destroying the dragSort', function() {
  56 + beforeEach(function() {
  57 + watcher.destroy();
  58 +
  59 + var dragTarget = $('.list_item:eq(0)');
  60 + dragOver(dragTarget, 0);
  61 + dragEnd(dragSource);
  62 + });
  63 +
  64 + it('does not respond to drag events anymore', function() {
  65 + expect(dragSpy.called).to.equal(false);
  66 + });
  67 +
  68 + });
16 69
  70 + describe('when it is dragged to the left of the first item', function() {
  71 + var dragTarget;
17 72
  73 + beforeEach(function() {
  74 + dragTarget = $('.list_item:eq(0)');
  75 + dragOver(dragTarget, 0);
  76 + });
  77 +
  78 + it('puts the dragSource in the first position', function() {
  79 + expect(dragSource.index()).to.equal(0);
  80 + });
  81 +
  82 + it('pushes the dragTarget over one', function() {
  83 + expect(dragTarget.index()).to.equal(1);
  84 + });
  85 +
  86 + describe('when dragging ends', function() {
  87 + beforeEach(function() {
  88 + dragEnd(dragSource);
  89 + });
  90 +
  91 + it('removes dragging class', function() {
  92 + expect(dragSource.hasClass('dragging')).to.equal(false);
  93 + });
  94 +
  95 + it('executes the callback passing the oldIndex and newIndex', function() {
  96 + expect(dragSpy.calledWith(3, 0)).to.equal(true);
  97 + });
  98 + });
  99 + });
  100 +
  101 + describe('when it is dragged to the right of the first item', function() {
  102 + var dragTarget;
  103 +
  104 + beforeEach(function() {
  105 + dragTarget = $('.list_item:eq(0)');
  106 + dragOver(dragTarget, 20);
  107 + });
  108 +
  109 + it('puts the dragSource to the right of the first item', function() {
  110 + expect(dragSource.index()).to.equal(1);
  111 + });
  112 + });
  113 +
  114 + describe('when it is dragged over itself', function() {
  115 + var dragTarget;
  116 +
  117 + beforeEach(function() {
  118 + dragTarget = dragSource;
  119 + dragOver(dragTarget, 130);
  120 + });
  121 +
  122 + it('keeps the same index', function() {
  123 + expect(dragSource.index()).to.equal(3);
  124 + });
  125 + });
  126 + });
18 127 });

0 comments on commit de29f87

Please sign in to comment.
Something went wrong with that request. Please try again.