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 demo

Answer 1

每次在元素上聚焦或模糊时，都必须指定可拖动功能。我已更新了您的JSFiddle as can be seen here：

$（document）.ready（function（）{ $（ 'elemContainer。'）可拖动（）。 }）;

$(".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 方法。

此方法完全删除可拖动功能。这将使元素返回到pre-init状态。

所以你可以这样做： 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

不要使用destroy！由于可拖动或其他事件而继续使用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/

条件可拖动的jQuery UI

3 个答案: