Question

我正在使用jquery-ui拖拽拖放，jeditable用于内联编辑。

当我拖放一个也可编辑的元素时，在它被删除后立即开始并弹出“编辑模式”。

如何禁用此行为？

修改 - 由于netsting而导致问题发生 - 请参阅this example。我还添加了draggable到混合中以使示例更加真实（实际的真正问题在this site我正在处理）

注意 - 即使这个问题因为赏金规则而得到了接受的答案，但问题依然无法解决。

Answer 1

更新2：使用儿童（）

DEMO 2： http://jsbin.com/izaje3/2

回应你的评论

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).children('div').removeClass('editable')
        },
        stop: function(event, ui) {
           $(this).children('div').addClass('editable')
        }
    });
});

DEMO： http://jsbin.com/ihojo/2

$(function() {
    $(".draggable").draggable({
        drag: function(event, ui) {
            $(this).unbind('editable')
        }
    });
    $(".editable").editable();
});

或者你可以这样做：

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).removeClass('editable')
        },
        stop: function(event, ui) {
            $(this).addClass('editable')
        }
    });
});

假设你有类似的东西：

<div class="draggable editable"></div>

注意：只是为了清楚，你也可以使用handle方法来利用它！

http://jqueryui.com/demos/draggable/#handle

Answer 2

我发现这篇文章是因为我今天遇到了这个确切的问题（在jQuery UI Draggable中嵌套了jEditable）;虽然我不认为我的解决方案特别优雅，但我觉得我应该分享它以防其他人遇到同样的问题。

我没有尝试解除绑定并重新初始化拖动事件上的jEditable（这似乎是在stop（）重新初始化之后触发click事件），我发现更容易设置jEditable以使用仅触发的自定义事件如果未拖动拖动（模拟单击），则在mouseup上。

作为可编辑的第一个参数的匿名函数应该替换为你正在发布的url，如果这是你的事情。

http://jsbin.com/izaje3/13

var notdragged = true;
$('.editable').editable(function(value, settings) {
        return value;
    }, {event : 'custom_event'
});
$('.draggable').draggable({
    start: function(event, ui) {
        notdragged = false;
    }
});

$('.editable').bind('mousedown', function() {
    notdragged = true;
}).bind('mouseup', function() {
    if (notdragged) {
        $(this).trigger("custom_event");
    }
});

Answer 3

oftomh，您应该尝试抓住放置处理程序中的Event对象，然后尝试调用event.preventDefault()，event.stopImmediatePropagation()或event.stopPropagation()

幸运的是，你正在使用jQuery。与vanilla JS交叉浏览是令人讨厌的。

Answer 4

开膛，

一种可能的解决方法是对jEditable组件使用双击事件。

为此，只需使用以下选项初始化jEditable对象：

event: 'dblclick'

Answer 5

您可以尝试在这些项目上设置contenteditable =“false”。只需尝试在相关的html标记中添加此属性，看看发生了什么。

jeditable意外触发嵌套项目上的Draggable

5 个答案: