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 回答