Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

Question

It seems that an input element loses a lot of functionality when put into an element with draggable=\"true\". This only seems to occur in firefox.

See my jsfiddle: h

Answer 1

If you are like me and come across this issue, and are using Sortable.js, you can use the filter option to specify elements that won't trigger dragging, and thus allow the input to operate normally.

JQuery:

$('#my-sortable').sortable({
    filter: ".my-text-input",   // Or whatever class you specify
    preventOnFilter: false      // Allow the input to operate normally
});

You can also find this information from the list of Sortable.js options found here: https://github.com/SortableJS/sortablejs