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

Posted 2023-05-08

【中文标题】使用jquery ui拖放后的动态div宽度

【英文标题】：Dynamic div width after drop using jquery ui

【发布时间】：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
  
);

【参考方案1】：

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