为什么其父级可拖动的div失去其contenteditable属性? [英] Why the div whose parent is draggable, loses its contenteditable attribute?

问题描述

我有一个子div，其父div可拖动，并且content-editable设置为true.我正在使用jQuery UI使它的父div可拖动，但是子div失去了它的contenteditable属性.

I have a child div whose parent div is draggable with content-editable set to true. I am using jQuery UI to make its parent div to be draggable but the child div loses its contenteditable attribute.

我的问题是为什么那个孩子div表现出这种行为?

My question is why that child div is showing this kind of behaviour?

$(".draggable").draggable();

小提琴链接

推荐答案

我不确定是否可以同时进行编辑和拖动.无论如何，您可以在单击可编辑区域时取消拖动:

I'm not sure if editing and dragging can occur together. Anyway, you can cancel dragging when clicking on the editable area:

$(".editable").on("mousedown", function (e) {
    e.stopPropagation();
    return;
});

要扩大可拖动区域，您需要缩小可编辑区域，如下所示:

To enlarge draggable area, you need to shrink editable one, something like this:

.editable {
    max-width:190px;
    height:20px;
    border: 1px solid #f00;
    padding:1px;
    display: inline-block;
}

位于 jsFiddle 上的工作演示.

这篇关于为什么其父级可拖动的div失去其contenteditable属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！