From 6d9869c83b339e285b308af790f47a98d7bcf806 Mon Sep 17 00:00:00 2001 From: james2doyle Date: Fri, 23 Aug 2013 16:30:32 -0400 Subject: [PATCH 1/8] cleaned up code. fixed indentation. removed redundancy. removed double dragend event. add gitignore. --- .gitignore | 1 + jquery.sortable.js | 155 ++++++++++++++++++++++----------------------- 2 files changed, 77 insertions(+), 79 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..227fe86 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.tern-port \ No newline at end of file diff --git a/jquery.sortable.js b/jquery.sortable.js index 7622835..e8c5c12 100644 --- a/jquery.sortable.js +++ b/jquery.sortable.js @@ -1,86 +1,83 @@ /* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable - * + * * Copyright 2012, Ali Farhadi * Released under the MIT license. */ -(function($) { -var dragging, placeholders = $(); -$.fn.sortable = function(options) { - var method = String(options); - options = $.extend({ - connectWith: false - }, options); - return this.each(function() { - if (/^enable|disable|destroy$/.test(method)) { - var items = $(this).children($(this).data('items')); - var handles = $(this).children($(this).data('handles')).attr('draggable', method == 'enable'); - if (method == 'destroy') { - items.add(this).removeData('connectWith items') - .off('dragstart.h5s dragend.h5s dragover.h5s dragenter.h5s drop.h5s'); - handles.off('selectstart.h5s'); - } - return; - } - var index, items = $(this).children(options.items), handles = options.handle ? items.find(options.handle) : items; - var parent; - var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">'); - $(this).data('items', options.items) - $(this).data('handles', options.handle ? options.handle : options.items) - placeholders = placeholders.add(placeholder); - if (options.connectWith) { - $(options.connectWith).add(this).data('connectWith', options.connectWith); - } - // Setup drag handles - handles.attr('draggable', 'true'); /*.not('a[href], img, input').on('selectstart.h5s', function() { - this.dragDrop && this.dragDrop(); - return false; - }).end();*/ - - // Handle drag events on draggable items - items.on('dragstart.h5s', function(e) { - var dt = e.originalEvent.dataTransfer; - dt.effectAllowed = 'move'; - index = (dragging = $(this)).addClass('sortable-dragging').index(); - parent = dragging.parent(); - e.stopPropagation(); - }).on('dragend.h5s', function() { - if (!dragging) { - return; - } - dragging.removeClass('sortable-dragging').show(); - placeholders.detach(); - if (index != dragging.index() || !parent.is(dragging.parent())) { - dragging.parent().trigger('sortupdate', {item: dragging}); - } - dragging = null; - parent = null; - }).add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) { - if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) { - return true; - } - if (e.type == 'drop') { - e.stopPropagation(); - placeholders.filter(':visible').after(dragging); - dragging.trigger('dragend.h5s'); - return false; - } - e.preventDefault(); - e.originalEvent.dataTransfer.dropEffect = 'move'; - if (items.is(this)) { - if (options.forcePlaceholderSize) { - placeholder.height(dragging.outerHeight()); - } - dragging.hide(); - $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder); - placeholders.not(placeholder).detach(); - } else if (!placeholders.is(this) && !$(this).children(options.items).length) { - placeholders.detach(); - $(this).append(placeholder); - } - return false; - }); - }); -}; + (function($) { + var dragging, placeholders = $(); + $.fn.sortable = function(options) { + var method = String(options); + options = $.extend({ + connectWith: false + }, options); + return this.each(function() { + var $this = $(this); + if (/^enable|disable|destroy$/.test(method)) { + var items = $this.children($this.data('items')); + var handles = $this.children($this.data('handles')).attr('draggable', method == 'enable'); + if (method == 'destroy') { + items.add(this).removeData('connectWith items') + .off('dragstart.h5s dragend.h5s dragover.h5s dragenter.h5s drop.h5s'); + handles.off('selectstart.h5s'); + } + return; + } + var index, items = $this.children(options.items), handles = options.handle ? items.find(options.handle) : items; + var parent; + var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">'); + $this.data('items', options.items); + $this.data('handles', options.handle ? options.handle : options.items); + placeholders = placeholders.add(placeholder); + if (options.connectWith) { + $(options.connectWith).add(this).data('connectWith', options.connectWith); + } + // Setup drag handles + handles.attr('draggable', 'true'); + + // Handle drag events on draggable items + items.on('dragstart.h5s', function(e) { + e.originalEvent.dataTransfer.effectAllowed = 'move'; + index = (dragging = $(this)).addClass('sortable-dragging').index(); + parent = dragging.parent(); + e.stopPropagation(); + }).on('dragend.h5s', function() { + if (!dragging) { + return; + } + dragging.removeClass('sortable-dragging').show(); + placeholders.detach(); + if (index != dragging.index() || !parent.is(dragging.parent())) { + dragging.parent().trigger('sortupdate', {item: dragging}); + } + dragging = null; + parent = null; + }).add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) { + if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) { + return true; + } + if (e.type == 'drop') { + e.stopPropagation(); + placeholders.filter(':visible').after(dragging); + return false; + } + e.preventDefault(); + e.originalEvent.dataTransfer.dropEffect = 'move'; + var $this = $(this); + if (items.is(this)) { + if (options.forcePlaceholderSize) { + placeholder.height(dragging.outerHeight()); + } + dragging.hide(); + $this[placeholder.index() < $this.index() ? 'after' : 'before'](placeholder); + placeholders.not(placeholder).detach(); + } else if (!placeholders.is(this) && !$this.children(options.items).length) { + placeholders.detach(); + $this.append(placeholder); + } + return false; + }); + }); + }; })(jQuery); From 90b3fd337bff85c7fc790fbf115134a81d947fb5 Mon Sep 17 00:00:00 2001 From: james2doyle Date: Fri, 23 Aug 2013 16:39:36 -0400 Subject: [PATCH 2/8] fix readme reference --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a3d888f..9c8ef24 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ HTML5 Sortable jQuery Plugin ============================ -**[Demos & Documentation](http://farhadi.ir/projects/html5sortable)** +**[Demos & Documentation](http://james2doyle.github.io/html5sortable)** Features -------- @@ -47,7 +47,7 @@ Setting `forcePlaceholderSize` option to true, forces the placeholder to have a ``` javascript $('.sortable').sortable({ - forcePlaceholderSize: true + forcePlaceholderSize: true }); ``` From 2b7168df8d59b4e99d686f04852b9ce013f79138 Mon Sep 17 00:00:00 2001 From: james2doyle Date: Mon, 26 Aug 2013 10:36:53 -0400 Subject: [PATCH 3/8] allow custom namespacing. adding namespace and event examples to index.html --- index.html | 9 ++++++++- jquery.sortable.js | 13 +++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0b650db..1a9a6b9 100644 --- a/index.html +++ b/index.html @@ -160,7 +160,14 @@

Connected Sortable Lists