使用jquery ui拖放后的动态div宽度答案

【问题标题】：Dynamic div width after drop using jquery ui使用jquery ui拖放后的动态div宽度
【发布时间】：2020-12-15 06:44:37
【问题描述】：

我需要创建一个工作流构建器。我使用 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
  }
});

【问题讨论】：

标签： html jquery css jquery-ui drag-and-drop

【解决方案1】：

问题出在jquery.flowchart中，看.draggable ({drag:入库源码。希望它对某人有所帮助

【讨论】：