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',
});
});