agavazov / dragsort Goto Github PK

Good job! I missing a version history, so I can check for updates. ;)

https://github.com/agavazov/dragsort/blob/master/dist/js/jquery.dragsort.js#L433
Actual:

dragSelectorExclude: 'input, textarea',

Should be:

dragSelectorExclude: 'input,textarea,button,select,option',

Why exclude input and textarea, but not button and select?

Mobile browser inspector console shows for every move in demo

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

This error may be solved using CSS. Add touch-action: none; to the container.

touch-action: none;

https://github.com/agavazov/dragsort/blob/master/dist/js/jquery.dragsort.js#L152

                        list.placeHolderItem = list.draggedItem.next().css({
                            height: h,
                            width: w
                        }).attr('data-placeholder', true);

Actual the placeholder dimensions are wrong(smaller), when items have paddings. Should be like:

                        list.placeHolderItem = list.draggedItem.next().css({
                            height: list.draggedItem.outerHeight(),
                            width: list.draggedItem.outerWidth()
                        }).attr('data-placeholder', true);

And you should maybe remove unnecessary "var"?

var h = list.draggedItem.height();
var w = list.draggedItem.width();

Destroy doesn't do anything. Everything simply continues to work.

https://github.com/agavazov/dragsort/blob/master/dist/js/jquery.dragsort.js#L43
I would like a new option to set a custom class to element

<ul id="element"><li>...</li></ul>

$('#element').dragsort({
initClass: 'dragsort'
});

HTML result
<ul id="element" class="dragsort"><li>...</li></ul>

Workaround (harcoded):

$(this.container).addClass('dragsort').attr('data-listidx', i).bind('mousedown touchstart'.....

I have a input for tags.
<span><ul><li>Tag1</li><li>Tag2</li></ul></span>
LI have a margin-top and margin-right of 5px and "padding: 0 5px 5px 5px".
So LI have always a distance of 5px between LI and UL.

LI is height = 24px
UL is height = 34px (24 + 5 li-margin-top + 5 ul-padding-bottom)

Your calculate box value is correct. But LI have a margin-top of 5px, so your area its shifted down 5px.

https://github.com/agavazov/dragsort/blob/master/dist/js/jquery.dragsort.js#L166

list.draggedItem.css({position: 'absolute', opacity: 0.8, 'z-index': 999, height: h, width: w});

should be with margin=0?

list.draggedItem.css({position: 'absolute', opacity: 0.8, 'z-index': 999, height: h, width: w, margin: 0});

So its working in my test case correctly. dragitem should move freely in container, without margin.

bind() and unbind() are deprecated

https://api.jquery.com/category/deprecated/deprecated-3.0/