条件可拖动的jQuery UI

Question

我有一个contenteditable div用作富文本编辑器。 通常，div应该是可拖动的。 但是当div聚焦时，我需要关闭可拖动功能，这样我就可以通过单击并拖动来选择文本。

所以，我正在尝试使用if语句

if (!$('.elemText').is(':focus')) {
    $('.elemContainer').draggable();
};

当我专注于满足的div时，这并没有生效。

同样，如果我反转它，那么div只有在聚焦时才可以拖动。 这也没有生效。

if ($('.elemText').is(':focus')) {
    $('.elemContainer').draggable();
};

我还使用其他一些javascript来处理焦点和模糊事件。

$('.elemText').on({
    focus: function() {
        if (!$(this).data('disabled')) this.blur()
    },
    dblclick: function() {
        $(this).data('disabled', true);
        this.focus()
    },
    blur: function() {
        $(this).data('disabled', false);
    }
});

JSFiddle演示

Answer 1

每次在元素上聚焦或模糊时，都必须分配可拖动功能。 我已经更新了你的JSFiddle，如下所示 ：

$（document）.ready（function（）{$（'。elemContainer'）。draggable（）;}）;

$(".elemText").on({
    focus: function() {
        $('.elemContainer').draggable("destroy");
        if (!$(this).data('disabled')) 
            this.blur();
    }, dblclick: function() {
        $(this).data('disabled', true);
        this.focus()
    }, blur: function() {
        $('.elemContainer').draggable();
        $(this).data('disabled', false);
    }
});

每次从文本框中取出焦点时，该项目都可以draggable ，当你专注于它时， .draggable("destroy"); 删除拖动功能。

Answer 2

使用destroy方法。

此方法完全删除可拖动功能。 这将使元素返回到其初始化前状态。

所以你可以这样做： jsFiddle LIVE DEMO

$('.elemContainer').draggable();

$('.elemText').on({
    focus: function() {
        if (!$(this).data('disabled')) this.blur();
    },
    dblclick: function() {
        $('.elemContainer').draggable('destroy');       
        $(this).data('disabled', true);
        this.focus();
    },
    blur: function() {
         $('.elemContainer').draggable(); 
        $(this).data('disabled', false);
    }
});

有关更多信息，请阅读API Documentation

Answer 3

不要使用破坏！ 由于可拖动或其他事件而继续使用event.Propagation。 如果你的家伙在可拖动的事件上为给定的“可编辑”-div启用事件，这个解决方案将正常工作。 没有破坏任何东西！ 问题是关于可拖动的...可拖动将阻止您的可编辑div中的点击焦点事件...这就是为什么它不起作用。 顺便说一句......你只需要那个聪明的代码：

$('.elemContainer').draggable();

$('.elemText').on({
    click: function() {
       $(this).focus();
    },
    focus: function() {
        $('.elemContainer').draggable({ disabled: true });
    },
    blur: function() {
        $('.elemContainer').draggable({ disabled: false });
    }
});

http://jsfiddle.net/9jdT6/14/