sortablejs – Drag-n-Drop without jQuery UI

I had a need to enable drag-n-drop for a particular part of our portal. In the past I’ve always used jQuery-UI as it’s quite easy to enable drag-n-drop. Doing some research I came across a StackOverflow question about enabling drag-n-drop with Polymer. One of the answers mentioned sortablejs. This is a very minimalist library to enable drag-n-drop. Best part about this library is that it has a port for Polymer. BONUS! But there are several ports available: Angular, Knockout, Meteor, etc.

So implementation is super easy:

bower install --save polymer-sortablejs

Then where you want to use it:

<sortable-js draggable="div" group="divs">
    <template is="dom-repeat" items="{{repeatableItems}}">
        <div>{{item}}</div>
    </template>
</sortable-js>

This will enable all the divs in the repeat to be draggable within the same list, or any other list which has the same group name. Very cool. The options are the same as if you were using just the plain old javascript library. You also get all the same events fired.

So if you’re looking to enable drag-n-drop in your project, take a look at sortablejs.

Share This:

2 thoughts on “sortablejs – Drag-n-Drop without jQuery UI

  1. I’m curious to hear if you’ve attempted dropping between lists where the drop list is empty? I am having no problems moving items between populated lists however if the destination list is empty it doesn’t work for me.

  2. Hi Tony, seems I have to approve comments :-/ so sorry about the delay there. But yes, I too had problems with an empty list. The way I addressed it is to set the css min-height to something like 50px or 75px.

    Another issue I’ve run into is when you have 2 lists. So here’s the scenario… you have say a list of cards that can be sorted, but you can also drop cards into cards. The issue is when you move a card over a card, they start moving out of the way of each other so it makes it very difficult to drop a card into a card. How I addressed that is to enable the animation option and set it to 275. This helped but didn’t “totally” fix the issue.

Comments are closed.