JQueryUI Drag n Drop not able to Sort after Editable Element is Enabled

Question

Hi I'm hoping someone can help me figure out a bug I'm having with a drag n drop sortable. Currently I have elements on the left side contained within in a div which I call the draggable area. On the right side I have the drop zone. The dragging and dropping work just fine with sortable but when I enable an editable function the sorting does not work but the editiable works just fine.

To make the editable work within the drop area I had to add..

handle: '.sortable-handle'  to  .sortable({})

But when this handle is enabled the sorting stops. I'd like to be able to drag/drop, sort and edit the element within the drop area. Im using Froala text editor for the editable functionality

Here is a working example: http://jsfiddle.net/darinnj/bdaerfyq/

Let me know if anyone has an effecient way of accomplishing this.

Answer 1

I updated your jsFiddle with handlers to drag the items after you drop them. http://jsfiddle.net/bdaerfyq/4/

$('.contentTitle:not([data-initialized])').editable({
  initOnClick: true,
  buttons: ['formatBlock', 'blockStyle', 'bold', 'italic', 'underline', 'strikeThrough', 'color', 'align', 'outdent', 'indent', 'createLink', 'undo', 'redo', 'inserthorizontalrule'],
  blockTags: ["h1", "h2", "h3", "h4", "h5", "h6"]
}).attr('data-initialized', true).parent().append('<span class="sortable-handle"></span>');

Also, it's important to stop propagation on the handler so that it doesn't propagate further to the editor.

$('body').on('.sortable-handle', function (e) {
    e.stopPropagation();
});