使用jQuery UI删除后的动态div宽度

问题描述

我需要创建一个工作流生成器。我使用jquery ui进行拖放。
我将元素拖到具有画布ID的div上。这是它的CSS

  overflow-x: scroll;
  width: auto;
  overflow-y: scroll;

问题在于，如果图表很大，那么我们需要添加滚动条。当我拖动一个元素时，会出现一个滚动。放下该元素后，即使该位置大于画布本身的宽度（例如canvas.width() == 800px,droppedElement.x == 2000px），该元素也将保持在正确的位置。但是，如果我再次开始拖动该元素，它将立即移动到画布的边缘（即draggedElement.x == 800px）。
我尝试增加画布的宽度（基于放置的元素坐标），但这仅向页面添加了水平滚动。然后，对于画布的父级（col-lg-8），我添加了overflow: hidden，但这完全没有帮助，只是将容器剪切了。
我没有更多关于如何解决此问题的想法。希望能给您提示

可拖动

  $('.create-flowy').draggable({
    containment: '#canvas',appendTo: '#canvas',helper: function(event,ui) {
      return $(this).clone();
    }
  });

拖放

$('#canvas').droppable({
  drop: function(event,ui) {
    if (ui.helper.attr('class').includes('flowchart-operator')) return

    const relativeLeftPos = ui.helper.position().left + document.getElementById('canvas').scrollLeft;
    const relativetopPos = ui.helper.position().top;
    const blockTitle = ui.helper.find('p')[0].textContent;
    
    // if (relativeLeftPos > $(this).width() ) {
    //   $(this).width(relativeLeftPos + 100);
    // }
    createAndAppendNewBlock(relativeLeftPos,relativetopPos,blockTitle); //jquery.flowchart,it's not important
  }
});

解决方法

问题出在jquery.flowchart，请看.draggable ({drag:到库源代码中。希望它能帮助到某人