diff --git a/bower.json b/bower.json index 39fc86c..a05b2c3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "html5sortable", - "version": "0.0.1", + "version": "0.1.0", "homepage": "http://farhadi.ir/projects/html5sortable/", "authors": [ "Ali Farhadi " diff --git a/jquery.sortable.js b/jquery.sortable.js index 2ebca6f..e071546 100644 --- a/jquery.sortable.js +++ b/jquery.sortable.js @@ -7,15 +7,16 @@ */ (function($) { var dragging, placeholders = $(); -$.fn.sortable = function(options) { +$.fn.html5sortable = function(options) { var method = String(options); options = $.extend({ connectWith: false }, options); + var self = this; return this.each(function() { if (/^(enable|disable|destroy)$/.test(method)) { - var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable'); - if (method == 'destroy') { + var items = $(this).children($(this).data('items')).attr('draggable', method === 'enable'); + if (method === 'destroy') { items.add(this).removeData('connectWith items') .off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s'); } @@ -28,7 +29,7 @@ $.fn.sortable = function(options) { }).mouseup(function() { isHandle = false; }); - $(this).data('items', options.items) + $(this).data('items', options.items); placeholders = placeholders.add(placeholder); if (options.connectWith) { $(options.connectWith).add(this).data('connectWith', options.connectWith); @@ -39,39 +40,77 @@ $.fn.sortable = function(options) { } isHandle = false; var dt = e.originalEvent.dataTransfer; - dt.effectAllowed = 'move'; + dt.effectAllowed = 'copy'; dt.setData('Text', 'dummy'); index = (dragging = $(this)).addClass('sortable-dragging').index(); + + var targets = dragging.attr('data-targets'); + if(targets !== undefined) { + targets.split(',').forEach(function(target) { + $('[data-key="'+target+'"]').addClass('hot'); + }); + } }).on('dragend.h5s', function() { if (!dragging) { return; } + + var targets = dragging.attr('data-targets'); + if(targets !== undefined) { + targets.split(',').forEach(function(target) { + $('[data-key="'+target+'"]').removeClass('hot'); + }); + } + dragging.removeClass('sortable-dragging').show(); placeholders.detach(); - if (index != dragging.index()) { - dragging.parent().trigger('sortupdate', {item: dragging}); - } + dragging.parent().trigger('sortupdate', {item: dragging}); dragging = null; }).not('a[href], img').on('selectstart.h5s', function() { - this.dragDrop && this.dragDrop(); + if(this.dragDrop) { + this.dragDrop(); + } return false; }).end().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') { + + var targets = dragging.attr('data-targets'); + if(targets !== undefined && targets.split(',').indexOf(self.attr('data-key')) === -1) { + return true; + } + + if (e.type === 'drop') { e.stopPropagation(); - placeholders.filter(':visible').after(dragging); + + var parent = placeholders.filter(':visible').parent(); + + if(dragging.parent().is(parent)) { + dragging.detach(); + } else { + dragging.removeClass('sortable-dragging').show(); + } + + dragging = dragging.clone(true); + + if(parent.attr('data-unique') === 'true') { + parent.find('[data-value="'+dragging.attr('data-value')+'"]').remove(); + } + + dragging.insertAfter(placeholders.filter(':visible')); dragging.trigger('dragend.h5s'); return false; } e.preventDefault(); - e.originalEvent.dataTransfer.dropEffect = 'move'; + e.originalEvent.dataTransfer.dropEffect = 'copy'; if (items.is(this)) { if (options.forcePlaceholderSize) { - placeholder.height(dragging.outerHeight()); + placeholder.height(dragging.outerHeight()+1); + } + if(!targets || targets.split(',').indexOf(dragging.parent().attr('data-key')) !== -1) { + dragging.hide(); } - dragging.hide(); $(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder); placeholders.not(placeholder).detach(); } else if (!placeholders.is(this) && !$(this).children(options.items).length) { diff --git a/jquery.sortable.min.js b/jquery.sortable.min.js deleted file mode 100644 index 7e90810..0000000 --- a/jquery.sortable.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * HTML5 Sortable jQuery Plugin - * http://farhadi.ir/projects/html5sortable - * - * Copyright 2012, Ali Farhadi - * Released under the MIT license. - */ -(function(e){var t,n=e();e.fn.sortable=function(r){var i=String(r);r=e.extend({connectWith:false},r);return this.each(function(){if(/^enable|disable|destroy$/.test(i)){var s=e(this).children(e(this).data("items")).attr("draggable",i=="enable");if(i=="destroy"){s.add(this).removeData("connectWith items").off("dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s")}return}var o,u,s=e(this).children(r.items);var a=e("<"+(/^ul|ol$/i.test(this.tagName)?"li":"div")+' class="sortable-placeholder">');s.find(r.handle).mousedown(function(){o=true}).mouseup(function(){o=false});e(this).data("items",r.items);n=n.add(a);if(r.connectWith){e(r.connectWith).add(this).data("connectWith",r.connectWith)}s.attr("draggable","true").on("dragstart.h5s",function(n){if(r.handle&&!o){return false}o=false;var i=n.originalEvent.dataTransfer;i.effectAllowed="move";i.setData("Text","dummy");u=(t=e(this)).addClass("sortable-dragging").index()}).on("dragend.h5s",function(){if(!t){return}t.removeClass("sortable-dragging").show();n.detach();if(u!=t.index()){t.parent().trigger("sortupdate",{item:t})}t=null}).not("a[href], img").on("selectstart.h5s",function(){this.dragDrop&&this.dragDrop();return false}).end().add([this,a]).on("dragover.h5s dragenter.h5s drop.h5s",function(i){if(!s.is(t)&&r.connectWith!==e(t).parent().data("connectWith")){return true}if(i.type=="drop"){i.stopPropagation();n.filter(":visible").after(t);t.trigger("dragend.h5s");return false}i.preventDefault();i.originalEvent.dataTransfer.dropEffect="move";if(s.is(this)){if(r.forcePlaceholderSize){a.height(t.outerHeight())}t.hide();e(this)[a.index()