使用 jquery ui 下降后的动态 div 宽度

Question

我需要创建工作流程 builder。我使用 jquery ui 进行拖放。
我将元素拖到 ID 为 canvas 的 div 上。这是它的 css

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

问题是如果图表很大，那么我们需要添加一个滚动条。当我拖动一个元素时，会出现一个滚动条。放下时，元素保持在正确的位置，即使这个位置大于 canvas 本身的宽度（例如，canvas.width() == 800px, droppedElement.x == 2000px）。但是如果我再次开始拖动这个元素，它会立即移动到 canvas 的边缘（即 draggedElement.x == 800px）。
我尝试增加 canvas 的宽度（基于放置的元素坐标），但这只会向页面添加水平滚动。然后对于 canvas (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
  }
});

Answer 1

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

使用 jquery ui 下降后的动态 div 宽度

Dynamic div width after drop using jquery ui

html

css

jquery

drag-and-drop

jquery-ui