Question

嗨，我希望有人可以帮我找出一个我可以用拖拽排序的错误。目前我的左侧有元素包含在div中，我称之为可拖动区域。在右侧，我有下降区。使用可排序的拖放工作很好但是当我启用可编辑的功能时，排序不起作用，但可编辑的工作正常。

要在放置区域内进行可编辑的工作，我必须添加..

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

但是当启用此句柄时，排序会停止。我希望能够在拖放区域内拖放，排序和编辑元素。我使用Froala文本编辑器来获得可编辑的功能

以下是一个工作示例：http://jsfiddle.net/darinnj/bdaerfyq/

让我知道是否有人有一种有效的方法来实现这一目标。

Answer 1

我使用处理程序更新了你的jsFiddle，以便在删除它们之后拖动它们。 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>');

此外，停止在处理程序上的传播非常重要，这样它就不会进一步传播到编辑器。

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

启用可编辑元素后，JQuery UI拖放无法排序

1 个答案: