lukasoppermann/html5sortable

VanillaJS sortable lists and grids using native HTML5 drag and drop API.

HTML5Sortable

Lightweight vanillajs micro-library for creating sortable lists and grids using native HTML5 drag and drop API.

Table of Contents

• Community maintained
• Looking for Co-Maintainer
• Features
• Framework adapters
• Installation
• Examples
• Docs
  • Usage
  • Styling
  • Nesting
  • Events
  • Options
  • Methods
  • Sorting table rows
• Contributing
• Polyfills
• Touch Support
• Known Issues

Community maintained

A fair warning: this repository is currently not being actively developed. It works pretty fine, but if you find any issues you will need to fix them yourself. I try to keep the dependencies up to date and will happily help you fix issues and merge PRs for bugfixes or new features.

Looking for Co-Maintainer

If you are interested in actively helping with maintaining & improving this project please send me a message via twitter @lukasoppermann or email [email protected] with a short text of what you would like to do on the project. This may be something small like sorting issues and helping with questions and small bugs (if you have little time or are not that experienced) or something big like tackling big features.

Features

• Only 2KB (minified and gzipped).
• Built using native HTML5 drag and drop API. No dependencies.
• Supports both list and grid style layouts.
• Supported Browsers: Current versions of all major browsers (Chrome, Firefox, Safari, Opera, Edge), IE11+ (Polyfill required)
• Available as ES6 Module, AMD, CommonJS and iffe with sortable global

Demo: Check out the examples

Framework adapters

If you would like to add an adapter to the list, please create an issue with the link to your adapter.

• Polymer: https://github.com/trofrigo/polymer-html5sortable

Installation

We recommend installing the package via npm.

npm install html5sortable --save

Once you install the package using npm or downloading the latest release (don't use the master branch), load file you need from the dist/ directory, e.g. dist/html.sortable.min.js for the minified iife version.

• iffe (loading file via script tag): dist/html5sortable.js or dist/html5sortable.min.js
• ES6 Module: dist/html5sortable.es.js
• CommonJS Module: dist/html5sortable.cjs.js
• AMD Module: dist/html5sortable.amd.js

Still using bower? bower install https://github.com/lukasoppermann/html5sortable.git

Examples

You can find the examples online or test locally. Warning: the online demo is just to show off the features and is most likely not up to date. Please study this readme file for the current way of implementing and using html5sortable.

Docs

Usage

Use sortable method to create a sortable list:

sortable('.sortable');

Styling

Use .sortable-placeholder CSS selectors to change the styles of the placeholder. You may change the class by setting the placeholderClass option in the config object.

sortable('.sortable', {
  placeholderClass: 'my-placeholder fade'
});

Nesting

You can nest sortables inside each other. However, take care to add a wrapper around the items, a sortable-item can not at the same time be a sortable.

<div class="list"><!-- Sortable -->
  <div class="item"> Item 1
    <div class="sublist"><!-- Nested Sortable; Wrapping container needed -->
      <div class="subitem">Subitem 1</div>
      <div class="subitem">Subitem 2</div>
    </div>
  </div>
  <div class="item"> Item 2 </div>
</div>

Events

NOTE: Events can be listened on any element from the group (when using connectWith), since the same event will be dispatched on all of them.

sortstart

Use sortstart event if you want to do something when sorting starts:

sortable('.sortable')[0].addEventListener('sortstart', function(e) {
    /*

    This event is triggered when the user starts sorting and the DOM position has not yet changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    */
});

sortstop

Use the sortstop event if you want to do something when sorting stops:

sortable('.sortable')[0].addEventListener('sortstop', function(e) {
    /*

    This event is triggered when the user stops sorting and the DOM position has not yet changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    */
});

sortupdate

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

sortable('.sortable')[0].addEventListener('sortupdate', function(e) {

    console.log(e.detail);

    /*
    This event is triggered when the user stopped sorting and the DOM position has changed.

    e.detail.item - {HTMLElement} dragged element

    Origin Container Data
    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only
    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
    e.detail.origin.itemsBeforeUpdate - {Array} Sortable Items before the move
    e.detail.origin.items - {Array} Sortable Items after the move

    Destination Container Data
    e.detail.destination.index - {Integer} Index of the element within Sortable Items Only
    e.detail.destination.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
    e.detail.destination.container - {HTMLElement} Sortable Container that element is moved into (or copied into)
    e.detail.destination.itemsBeforeUpdate - {Array} Sortable Items before the move
    e.detail.destination.items - {Array} Sortable Items after the move
    */
});

sortenter

Fired when a dragitem enters a sortable container.

sortleave

Fired when a dragitem leaves a sortable container.

Options

items

Use the items option to specify which items inside the element should be sortable:

sortable('.sortable', {
    items: ':not(.disabled)'
});

handle

Use the handle option to restrict drag start to the specified element:

sortable('.sortable', {
    handle: 'h2'
});

forcePlaceholderSize

Setting the forcePlaceholderSize option to true, forces the placeholder to have a height:

sortable('.sortable', {
    forcePlaceholderSize: true
});

connectWith

Use acceptFrom instead. The connectWith option allows you to create a connected lists:

sortable('.js-sortable, .js-second-sortable', {
    connectWith: 'connected' // unique string, which is not used for other connectWith sortables
});

acceptFrom

Use the acceptFrom option to restrict which sortable's items will be accepted by this sortable. acceptFrom accepts a comma separated list of selectors or false to disabling accepting items. This is an alternative to the now deprecated connectWith and should not be used together.

sortable('.sortable', {
  acceptFrom: '.sortable, .anotherSortable' // Defaults to null
});

Note: Using acceptFrom also effects the sortable itself. This means, items will not be sortable within the list itself, if you do not include it in the acceptFrom option.

In the example the current list .sortable allows items within it to be sorted and accepts elements from .anotherSortable.

If you want to be able to move items between to sortables, the acceptFrom option must be present on both of them.

placeholder

Use the placeholder option to specify the markup of the placeholder:

sortable('.sortable', {
  items: 'tr' ,
  placeholder: '<tr><td colspan="7">&nbsp;</td></tr>'
});

hoverClass

Use the hoverClass option to apply css classes to the hovered element rather than relying on :hover. This can eliminate some potential drag and drop issues where another element thinks it is being hovered over. Disabled when disabling or destroying sortable element.

sortable('.sortable', {
  hoverClass: 'is-hovered is-hovered-class' // Defaults to false
});

dropTargetContainerClass

Use dropTargetContainerClass option to apply a css Class to the container. The class is added when dragged item enters the container and removed when it leaves it (or is dropped).

sortable('.sortable', {
  dropTargetContainerClass: 'is-drop-target' // Defaults to false
});

maxItems

Use the maxItems option to restrict the number of items that can be added to a sortable from a connected sortable. maxItems should always be combined with the items option. Make sure items does not match placeholder and other options, so that they are not counted.

sortable('.sortable', {
  maxItems: 3 // Defaults to 0 (no limit)
});

copy

Use the copy option to duplicate the element on drag. The original element will remain in the same position.

sortable('.sortable', {
  copy: true // Defaults to false
});

orientation

Use the orientation option to specify the orientation of your list and fix incorrect hover behaviour. Defaults to 'vertical'.

sortable('.sortable', {
  orientation: 'horizontal' // Defaults to 'vertical'
});

itemSerializer

You can provide a function that will be applied to every item in the items array (see serialize). The function receives two arguments: serializedItem: object, sortableContainer: Element. This function can be used to change the output for the items. Defaults to undefined.

sortable('.sortable', {
  itemSerializer: (serializedItem, sortableContainer) => {
    return {
      position:  serializedItem.index + 1,
      html: serializedItem.html
    }
  }
});

containerSerializer

You can provide a function that will be applied to the container object (see serialize). The function receives one argument: serializedContainer: object. This function can be used to change the output for the container. Defaults to undefined.

sortable('.sortable', {
  containerSerializer: (serializedContainer) => {
    return {
      length: container.itemCount
    }
  }
});

customDragImage

You can provide a function as a customDragImage property on the options object which will be used to create the item and position of the drag image (the half transparent item you see when dragging an element).

The function gets three parameters, the dragged element, an offset object with the offset values for the offset of the item and the dragstart event. The function MUST return an object with an element property with an html element as well as a posX and posY property with has the x and y offset for the dragImage.

sortable('.sortable', {
  customDragImage: (draggedElement, elementOffset, event) => {
    return {
      element: draggedElement,
      posX: event.pageX - elementOffset.left,
      posY: event.pageY - elementOffset.top
    }
  }
});

// elementOffset object that is received in the customDragImage function
{
  left: rect.left + window.scrollX,
  right: rect.right + window.scrollX,
  top: rect.top + window.scrollY,
  bottom: rect.bottom + window.scrollY
}

Methods

destroy

To remove the sortable functionality completely:

sortable('.sortable', 'destroy');

disable

To disable the sortable temporarily:

sortable('.sortable', 'disable');

enable

To enable a disabled sortable:

sortable('.sortable', 'enable');

serialize

You can easily serialize a sortable using the serialize command. If you provided an itemSerializer or containerSerializer function in the options object, they will be applied to the container object and the items objects before they are returned.

sortable('.sortable', 'serialize');

// You will receive an object in the following format
[{
  container: {
    node: sortableContainer,
    itemCount: items.length
  }
  items: [{
    parent: sortableContainer,
    node: item,
    html: item.outerHTML,
    index: index(item, items)
  }, …]
}, …]

reload

When you add a new item to a sortable, it will not automatically be a draggable item, so you will need to reinit the sortable. Your previously added options will be preserved.

sortable('.sortable');

Sorting table rows

• Initialize plugin on tbody element (browsers automatically add tbody if you don't)
• Keep in mind that different browsers may display different drag images of the row during the drag action. Webkit browsers seem to hide entire contents of td cell if there are any inline elements inside the td. This may or may not be fixed by setting the td to be position: relative;
• If you add a custom placeholder you must use a tr e.g. placeholder: "<tr><td colspan="3">The row will appear here</td></tr>", otherwise you will only be able to drop items when hovering the first column.

Contributing

This version is maintained by Lukas Oppermann and many other contributors. Thanks for your help! 👍

Contributions are always welcome. Please check out the contribution guidelines to make it fast & easy for us to merge your PR.

Issues: If you create a bug report, please make sure to include a test case showing the issue. The easiest way is to copy the codepen template.

Polyfills: Facing towards the future instead of the past

This project is focusing on modern, evergreen browsers to deliver a fast and small package. While many projects try build features so that it runs in the oldest browser (looking at you IE9), we try to create a fast and pleasant development experience using the language capabilities that the current version of Javascript offers.

Benefits

Small and fast package for modern browsers

While a backwards facing approach penalises modern browsers by making them download huge files, we prefer to ship a small package and have outdated browser bear the penalty of the polyfill. An additional benefit is that you might polyfill those features in any case so you don't have any additional load.

Contribution friendly code base

We try to encourage people to help shape the future of this package and contribute in small or big ways. By removing hard to understand hacks we make it easier for people new to the code base or even Javascript to contribute.

Helps browser optimisation

Browser try to performance optimise language features as much as possible. Working around the language to make code work in outdated browser may actually work against this.

Polyfill

We recommend using the Financial Times Polyfill Service which will polyfill only the necessary features for browsers that need a polyfill. It is basically a no-config, easy solution.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Touch Support

Touch support can be achieved by using the DragDropTouch polyfill. The DragDropTouch polyfill must be included before html5sortable is initialized.

Known Issues

Firefox

• Dragstart not working on buttons
  Dragstart event does not fire on button elements. This effectively disables drag and drop for button elements. See https://caniuse.com/#feat=dragndrop in the known issues section.
• Drag & Drop is not working on iOS
  But works in conjunction with DragDropTouch #522.

html5sortable's Issues

Submit to Bower.

Implement the Bower requirements and submit the package.

sortupdate event fires when d&d position hasn't changed.

The sortupdate READ.me info:

This event is triggered when the user stopped sorting and _the DOM position has changed_.

I'm seeing the event fire when the drag pos == drop pos; ui.item.index() == ui.oldindex. ie. The position hasn't changed. startparent & endparent are the same element.

This seems odd and at present I can't work out why.

How can we use this plugin for sorting multiple columns and rows in a matrix.

Hi!, Does this plugin support multiple element sorting?. I means dragging or sorting child elements when their parent element is also set to draggable='true'.

Strange issue with bower.

Hey there,

I found that this package was breaking wiredep in my build process. When this package is installed and included in my bower file. I get an error from wiredep:

Running "wiredep:target" (wiredep) task
Warning: Cannot read property 'main' of undefined Use --force to continue.

I also noticed that when I run:

→ bower install
bower html.sortable#~0.1.6      cached git://github.com/voidberg/html5sortable.git#0.1.6
bower html.sortable#~0.1.6    validate 0.1.6 against git://github.com/voidberg/html5sortable.git#~0.1.6
bower html.sortable#~0.1.6     install html.sortable#0.1.6

html.sortable#0.1.6 app/bower_components/html.sortable

And then:

→ bower prune
bower uninstall     html.sortable

It seems bower does not know the package is there and prunes it. I couldn't spot any obvious problem with the bower.json file. Any ideas?

AngularJS 1.2 compatibility

Hi,
I just found that drag'n'dropping elements between two connected, ng-repeat lists, using AngularJS 1.2.* would make some elements disapear.
However, they are present in the controller but not in the DOM.

Hope it helps!

Create build system

Create a build system using grunt.

Nested lists broken since 0.1.7

I noticed nested lists do not work, even though they do in this example #55. The bug was introduced in 0.1.7 f7e1b14

The bug which 0.1.7 fixes is present in chrome & firefox without this fix, so we can not just revert it.

Any ideas why @splagemann?

Don't create extra item in connected list

When I move one item from a connected list to the other it will create a placeholder, thus creating one extra item in that list. Would it be possible to keep the placeholder in there but move the first item to a connected list before or after the one the placeholder was put into? Here's a more visual example of what I mean:

I moved light blue Item 3 over to the yellow list, thus moving yellow Item 1 to the blue list.

It feels like both ways have their purpose so I think this should be configurable if implemented.

Making an easier way to get the current sort list at any given moment

Hi @voidberg

In jquery UI you can get the sort list in array format using ....sortable("serialize") function;

It would be awesome to have that kinda functionality for html5sortable too.

Let me know if I could help. Cheers.

Angular directive does not work when $compileProvider.debugInfoEnabled(false);

Angular developers recommend turning off debug info to speed up angular apps in production environments. Consequence of this action is that scope() functions stops working, because scope() functions are intended to be used only for development (and batarang extension). However, html5sortable directive heavily depend on scope() functions, so in production environments angular directive does not work.

Here is the official document stating these facts https://docs.angularjs.org/guide/production

Regards

Remove version from dist filenames

I am in the process of integrating html5sortable into my application and for that I want to concat my vendor libraries (simply to save time to not re-compile my vendor libs all the time).

Unfortunately, to make my gruntfile stable, I would have to determine html5sortable's version first, so I can build the filename. And I don't want to nail my dependency inside the bower.json to a specific version.

I would welcome a change to not include the version number in the dist files (or having both versions).

Nested sorting?

Hey,
I have a very weird issue: http://jsfiddle.net/v3b16mrq/

I would like to be able to sort the Subitems individually, and the upper li's too..

Is that possible?

Thanks in advance - any help is appreciated!

Prevent URL displaying in Chrome Ghost drag image

If you have <li><a href="http:\\www.somesite.com">Drag Me"</a></li> as a dragable element Chrome displays a Ghost image that includes the URL. I've done lots of Google'ing and found various info on Ghost images, but no easy way to not have the URL included.

Interestingly jquery-sortable http://johnny.github.io/jquery-sortable/ doesn't show the URL however after studying the code & css and checcking in the debugger I can't work out how it resolves this issue.

I realize this isn't a html5sortable issue but since that's what I'm using I'm hoping someone here may be able to help.

Cannot Drop into the first item occasionally

Hi,

There is already an issue item in the list, but I think my situation is a little different from that one. When I drag a new item into the list, sometimes I can drag an item into the first place, sometimes I cannot. It's very wired. My example as following (modified from the GitHub source example). I tested the code on ChromeV37 and FirefoxV33.

The example can be found in the following link:
https://gist.github.com/anonymous/960c0b7b447ab89ae465

Thanks in advance!

[Build] Add Source Maps to Build

It would be very nice if javascript source maps were included in dist for each minified JS file. Apparently this is now supported by uglifier:

https://github.com/gruntjs/grunt-contrib-uglify#new-options

Cloning a sortable element and appending the cloned element into the list results in an unsortable item

http://jsfiddle.net/w1qgL6uw/

Using 0.1.6, I apply sortable to a ul. Then I clone a li and append it to the ul. The new li element is not sortable.

Angularjs directive: connected support

Thank you for maintaining the plugin, and the angular directive.
I was trying to make it work for the connected example, but not sure it is supported.
Can you please help with this question at SO, or treat this as a feature request

http://stackoverflow.com/questions/18836939/angularjs-directive-html5-dragable-list

thanks
bsr.

html5sortable stop working in Firefox nightly

It's just stop working.
Do you know what I need to do for this?

Comparison with RubaXa/Sortable

Salut Alexandru,

How does this library compare with @RubaXa's Sortable ?

Add cookie ability to sort lists to what they were on refresh

I'd love to see an option to add a "cookie_name" variable on .sortable and have it keep the items in the order that I put them in.

http://stackoverflow.com/questions/1370417/jquery-ui-sortable-and-cookie

Not overly difficult to do, but it'd be much cleaner to have it in line.

multi-drag/drop?

Hi,

So I've been looking for a good alternative to jquery ui sortable and I happened upon this after a while. I'm trying to find a drag & drop library that supports multi-selection via shift and ctrl, as well as dropping them into the destination connected list. Is this possible?

Thanks!

Parent styling class?

Hi I am interested to apply a class to the droppable list when dragging is in effect. Something similar to highlighting the background of the list when dragging is in motion depending on where the drag is currently at. This might be a good UX indication of the drag in progress.

Will you consider adding a dragging-in-progress-item-is-on-top-of-this-container-class ?

Add this project to CDNJS?

I have been looking into having this project added to cdnjs.com.
The process of adding a project into cdnjs involves forking the actual cdnjs repo (https://github.com/cdnjs/cdnjs), adding your files where appropriate, and creating a pull request with your changes.

The root version of html5sortable definitely meets the library popularity requirements for being added to cdnjs, and this fork almost does. Given that this is one of the most popular and best maintained forks of the original project, I think the cdnjs people would be happy to include this library on their cdn,

I can create the fork and pull request if you like, but I think as the author it might be more appropriate for you to do so. Let me know if you would like me to make the request for you.

reload double binds the parent

Reload method is unbinding events from all children/items but not from parent container. All events are then rebound for both items and parent container, leaving parent double bound.

Incorrect `ui.oldindex` and `ui.item.index()` when using `items` options

I am using Ember to {{each}} helper to create a list, which looks like below:

  <ul class="sortable">
    <script></script>
    <script></script>
    <script></script>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <script></script>
    <script></script>
    <script></script>
  </ul>

All the script tags are Ember-generated as metaphor.

The following script is used to show the change of indexes:

  $('.sortable').sortable({
    items: 'li'
  }).bind('sortupdate', function(e, data) {
    $('#change').text(data.oldindex + ' -> ' + data.item.index());
  });

Both data.oldindex and data.item.index() are shift by 3 due to the script tags. Is this behavior intended or unexpected?

JSBin: http://jsbin.com/sidugi/edit

Example with <div>

Could you please make more examples?

Getting this to work with tables

I want to be able to reorder rows in a normal table:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

The way this tests though is for ul/ol -> li else div. Need to make it a bit smarter so it works for TRs. Unless there's some limitation I'm missing?

Zepto.js compatibilty

Check if the script works with Zepto.js and if not try to make the necessary changes.

Difficulties with sortable tables, can you improve documentation or give examples? Help?

In partial reference to this previously closed ticket....

I am also having issues with getting table rows to be sortable. Everything I've tried doesn't work.

$('table.sortable').sortable({    
    items: 'tbody tr',                 
    handle: 'span.handle',                                                                                                                                                                                                       
    placeholder: '<tr><td colspan="3">&nbsp;</td></tr>'
});

<table class="basic sortable">
    <colgroup>
        <col width="20">
        <col width="auto">
        <col width="auto">
     </colgroup>
     <thead>
          <tr>
               <th></th>
               <th>Name</th>
               <th>Active?</th>
          </tr>   
        </thead>
        <tbody>
          <tr>
               <td> <span class="handle">::</span> </td>
               <td> col 2 </td>
               <td> col 3 </td>
          </tr>
     </tbody>
</table>

As far as I can tell from the documentation, this should function. However, there are no examples for setting up a sortable table so I'm not entirely sure if I haven't missed something.

Can someone point me in the right direction?

Dropping outside the list has no effect

When I start dragging the placeholder is set to the position where the dragged item will go when dropping. But when I release the mouse outside the list, the item moves back to its initial position. This is very confusing for the user as he excepts the item to go to where the placeholder is.

So either the the item moves to last position of the placeholder or the placeholder moves back to the initial position of the item, when the item is dragged outside the list.

Options are not used after destroying the sortable

When I call sortable('destroy'), the string destroy is stored in the data attribute of the element, when I try to initialize the element afterwards the passed options object is not used cause of this lines:

 var soptions = $(this).data('opts');

      if (typeof soptions == 'undefined') {
        $(this).data('opts', options);
      }
      else {
        options = soptions;
      }

The main failure is, that the passed strings are stored in the data-opts, it would also be better to always use the passed options instead of the one in the data attribute. Maybe a simple type check before storing the options would fix it. At the moment I clear the data attribute by myself, but it feels like a hack.

AngularJS 1.3.x (and 1.2.x) compatibility

Hi,

It seems that html5sortable isn't compatible with AngularJS 1.3.x. I've tried to change in angular-ngRepeat-connected.html AngularJS and jQuery versions and there were weird issues.

It doesn't seem to be directly related to jQuery 2.x version (required by AngularJS 1.3.x) because when I've tried with jQuery 2.1.1 and AngularJS 1.0.7 in angular-ngRepeat-connected.html, it worked.

Any idea of what's going wrong?

Thanks,

What about detach this project from original and become separate project, not fork?

It is more difficult to find this repo since it is only fork of another one.
I did such thing once, you need just to ask GitHub support to separate project.
Thanks for picking up different changes from community together here!

Add aria roles (for accessibility)

aria-grabbed, aria-dropeffect, aria-grabbed, etc.

sortstart event?

I need to redraw some UI elements when the sort starts and finishes, is there anyway to listen for sortstart?

Items cant drop to first item

I cant drag items into the first item in a column.

When I try to drop an item in a grid into the first place of a row, then it only works when I enter the item with the mouse from above. When the mouse comes from a the left side it does not work

React usage

How can I use this library on React?

Enable selectstart on [contenteditable]

I have ol/ul lists that have li elements with [contenteditable] attribute set on them so the user can modify them.
By default, html5sortable disables selectstart behaviour and thus disables normal editing on the element.

Is this the intended behaviour?

btw. I've added [contenteditable] to the not() filter just before the selectstart.h5s event handler to counteract this.

NPM release

Would be nice to have when using browserify.

incorporate @bgooren's commit to enable nesting and dropping on connected list at same index

See farhadi/html5sortable#54

Error: no such method 'reload' for sortable widget instance

For angular v1.2.24 I get

Error: no such method 'reload' for sortable widget instance
at Function.jQuery.extend.error (http://localhost/beanbid/public/bower_resources/jquery/dist/jquery.js:250:9)
at HTMLUListElement. (http://localhost/beanbid/public/bower_resources/jquery-ui/jquery-ui.js:511:15)
at Function.jQuery.extend.each (http://localhost/beanbid/public/bower_resources/jquery/dist/jquery.js:375:23)
at jQuery.fn.jQuery.each (http://localhost/beanbid/public/bower_resources/jquery/dist/jquery.js:139:17)
at $.fn.(anonymous function) as sortable
at http://localhost/beanbid/public/bower_resources/html.sortable/dist/html.sortable.angular.js:34:27
at http://localhost/beanbid/public/bower_resources/angularjs/angular.js:14304:28
at completeOutstandingRequest (http://localhost/beanbid/public/bower_resources/angularjs/angular.js:4397:10)
at http://localhost/beanbid/public/bower_resources/angularjs/angular.js:4705:7

Ghost is broken when using handle.

When using a handle only the handle item is used as a ghost while it should be the whole item.

You can test it here http://htmlpreview.github.io/?https://github.com/voidberg/html5sortable/blob/master/examples/examples.html

OnDragOverEnter is not fired for disabled or non-items in list.

excluded options can create a block at the end or start of the list. It's a weird behavior - one would expect to be able to drag enabled options to the end of the list even if there's a disabled option there. It gets weirder if you have an enabled option last, and you drag it to the center - then you can't take it back: demo

I tried fixing this by setting up a variable named allitems that includes all the children (including excluded ones) and applying the dragover, dragenter and drop events to those. The results were weird - enabled options that allow dragging through disabled options, but if placed become nested within it: demo.

Is there any good solution to this?

event on drag

I would like to be able to have a list become visible when an item is being dragged. Currently, .click() and the like only fire once I release the mouse button. jQuery UI has the ability to target this, is there a way with html5sortable?

Select text in input not work with Firefox

Hi !
Nice to see this project with new mantained :)

We have old bug with this code. When you use with this sortable, you cannot select text in input or textarea fields.

What I can to do for fix this?

Thanks !

VanillaJs

Hey @voidberg,

what do you think about ditching frameworks and just make it work with vanillajs?

Maybe in a way that people who want jQuery for backwards compatibility could plug it in?

thoughts on touch support?

Watching external changes on sortable model

Hi,

First of all, many thanks for sincere enhancements to this html5Sortable plugin. It has helped us a lot. Putting in one small issue we noted, and the fix we put for the same. You might want to add it to the main branch sometime.

It looks like external changes to the model of the htmlSortable Angularjs directive are not watched. So, if the value of the model is changed after the sortable is rendered (say, new divs or list elements are added as a result of another UI element action), those new elements do not have sortable properties (rather draggable class), and cannot be dragged.

So, we needed to add the following code in the html5Sortable.js to make it work for our case.

Existing code............................................
ngModel.$render = function() {
$timeout(function () {
element.sortable('reload');
}, 50);
};
}

New code start
scope.$watch(attrs.ngModel, function() {
$timeout(function () {
element.sortable('reload');
}, 50);
}, true);
New code end.

    // Create sortable
    $(element).sortable(opts);
    if (model) {

..............................................................Existing code.

Regards,
--Parikshit N. Samant.

Enable/Disable/OnUpdate Angular methods

Would be nice to see examples of how to enable or disable sortable through an angular controller, as well as hook into the onUpdate callback from within a controller.

Use on delegated binding.

We should swap out the

$(xyz).on(...

for something like

$('body').on('...', '.sortable-item',...

because this would remove the need for reload when adding items to a list. We should probably also bind the sortable list this way, I would certainly need this and I guess some of people building sortable columns would appreciate this as well, so a new column which contains sortables can be added later on.

This would also solve #56.

The only part which needs a tiny bit more thought to it, is the binding on dragover because it binds to the list and the items. I would appreciate a pull for #72 and working more on this so the code gets easier, afterwards it will be much easier to du this.

.add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {