Событие jquery resizabe не заканчивается

Question

Я использую событие jquery resizable вместе с контекстным меню 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', 
}); 


}); 

Answer 1

Нашли этот вопрос после того, как работает с той же проблемой. Для записи моим обходным путем было добавить оболочку div, чтобы внешний div был изменен, а внутренний div имеет контекстное меню.