4

我使用 jquery-ui 的 draggable 进行拖放,并使用 jeditable进行内联编辑。

当我拖放一个也可编辑的元素时,在它被放下后 jeditable 就会启动并弹出“编辑模式”。

如何禁用此行为?

编辑- 问题是由于 netsting 而发生的 - 请参阅此示例。我还添加了可拖动的组合以使示例更真实(实际真正的问题在我正在处理的这个站点中)

注意- 即使由于赏金规则,这个问题的答案已被接受,但我仍然没有解决这个问题。

4

5 回答 5

5

更新 2:使用 children()

演示 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')
        }
    });
});​

演示: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

于 2010-06-01T21:23:15.097 回答
3

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

我没有尝试在拖动事件上取消绑定和重新初始化 jEditable(这似乎在 stop() 上重新初始化之后触发点击事件),而是发现更容易将 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");
    }
});
于 2011-09-05T06:39:17.897 回答
0

oftomh,您应该尝试Event在 drop 处理程序中获取对象,然后尝试调用event.preventDefault()event.stopImmediatePropagation()event.stopPropagation()

幸运的是,您使用的是 jQuery。使用 vanilla JS 跨浏览器这样做很烦人。

于 2010-04-30T11:01:38.443 回答
0

开膛手,

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

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

event: 'dblclick'
于 2010-05-28T14:21:48.080 回答
0

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

于 2010-09-03T09:25:23.107 回答