我使用 jquery-ui 的 draggable 进行拖放,并使用 jeditable进行内联编辑。
当我拖放一个也可编辑的元素时,在它被放下后 jeditable 就会启动并弹出“编辑模式”。
如何禁用此行为?
编辑- 问题是由于 netsting 而发生的 - 请参阅此示例。我还添加了可拖动的组合以使示例更真实(实际真正的问题在我正在处理的这个站点中)
注意- 即使由于赏金规则,这个问题的答案已被接受,但我仍然没有解决这个问题。
我使用 jquery-ui 的 draggable 进行拖放,并使用 jeditable进行内联编辑。
当我拖放一个也可编辑的元素时,在它被放下后 jeditable 就会启动并弹出“编辑模式”。
如何禁用此行为?
编辑- 问题是由于 netsting 而发生的 - 请参阅此示例。我还添加了可拖动的组合以使示例更真实(实际真正的问题在我正在处理的这个站点中)
注意- 即使由于赏金规则,这个问题的答案已被接受,但我仍然没有解决这个问题。
更新 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 方法!
我发现这篇文章是因为我今天遇到了这个确切的问题(将 jEditable 嵌套在 jQuery UI Draggable 中);虽然我不认为我的解决方案特别优雅,但我觉得我应该分享它,以防其他人遇到同样的问题。
我没有尝试在拖动事件上取消绑定和重新初始化 jEditable(这似乎在 stop() 上重新初始化之后触发点击事件),而是发现更容易将 jEditable 设置为使用仅在 mouseup 时触发的自定义事件,如果未拖动可拖动对象(模拟点击)。
作为可编辑的第一个参数的匿名函数应该替换为您要发布到的 url,如果那是您的事情。
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");
}
});
oftomh,您应该尝试Event
在 drop 处理程序中获取对象,然后尝试调用event.preventDefault()
,event.stopImmediatePropagation()
或event.stopPropagation()
幸运的是,您使用的是 jQuery。使用 vanilla JS 跨浏览器这样做很烦人。
开膛手,
一种可能的解决方法是为您的 jEditable 组件使用双击事件。
为此,只需使用以下选项初始化 jEditable 对象:
event: 'dblclick'
您可以尝试在这些项目上设置 contenteditable="false"。只需尝试在相关的 html 标记中添加此属性,看看发生了什么。