我正在使用 jquery 可调整大小的事件以及 jquery 上下文菜单。但是，两者似乎相互干扰，因此可调整大小的事件并没有结束。我尝试了在 jquery resizable event does not end上发布的解决方案，但是在调整一次大小后元素变得不可调整。看看这里：http ://autopulate.azurewebsites.net/try.html
对应的功能如下图：
function createContextMenu(){
$(".elmnt").contextMenu({
menu: 'elmntMenu'
},
function(action, el, pos) {
if(action=='edit'){
$(el).attr("oldvalue",$(el).val());
$(el).prop('contenteditable',true);
$(el).mouseleave(function() {
if($(el).val()!=$(el).attr('oldvalue')){
var elmnt_class = $(el).attr('class').split(' ')[2];
$('.'+elmnt_class).addClass('output');
}
$(el).attr('contenteditable',false);
});
}
});
$(".list").contextMenu({
menu: 'listMenu'
},
function(action, el, pos) {
if(action=='flatten'){
var tmp=el.attr('id');
var t=tmp.substring(tmp.length-1);
$('div[id^="tuple'+t+'_"]:not(:first)').each(function( index ){
$(this).remove();
});
$('.elmnt1').each(function( index ){
$(this).empty();
});
}
else if(action=='map'){
var tmp=el.attr('id');
var t=tmp.substring(tmp.length-1);
$('div[id^="tuple'+t+'_"]:not(:first)').each(function( index ){
$(this).remove();
});
$('.elmnt1').each(function( index ){
$(this).empty();
});
}
}
);
$(".tuple").contextMenu({
menu: 'tupleMenu'
},
function(action, el, pos) {
if(action=='concatenate'){
var newval="";
var tmp=el.attr('id');
var t=tmp.substring(5);
$('div[id^="elmnt'+t+'_"]').each(function( index ){
newval+=$(this).text();
if($(this).attr('id')!='elmnt'+t+'_1')$(this).remove();
});
$('.elmnt1').each(function( index ){
$(this).text(newval);
});
}
});
}
function destroyContextMenu(){
$(".list").destroyContextMenu();
$(".tuple").destroyContextMenu();
$(".elmnt").destroyContextMenu();
}
$(document).ready(function () {
createContextMenu();
$('.elmnt1_1').resizable({
start:function () {
destroyContextMenu();
console.log('resize started');
},
stop:function () {
createContextMenu();
console.log('resize stopped');
},
resize:function () {
console.log("resize happened");
},
handles: 'e',
alsoResize: '.elmnt1_1',
});
});