javascript - JS - jQuery 可拖动可调整大小的容器中的多个 div 互相插入

Question

我有一行，其中有多列。列宽除以列数，达到行宽的 100%。用户可以通过拖动列的边缘来更新列宽。我一整天都在谷歌上搜索像这样的脚本 http://dobtco.github.io/jquery-resizable-columns/但这适用于 div，而不是表列，而且运气不佳。

所以我选择了可​​拖动的解决方案，但因为它在拖动期间或拖动之后没有“遏制”更新。我必须更改draggable.js 文件，它可以工作 - http://itsgoran.com/draggable/ ，但我不想更改draggable.js 文件。

我添加:

o.containment = [parseInt(this.offsetParent.offset().left) + 40,0,parseInt(this.offsetParent.next().offset().left + this.offsetParent.next().width() - 40),0];

在“_setContainment”方法内。

在 _mouseStop() 事件中，调用 this._setContainment();

有没有办法解决这个问题，这样我就不必更改核心文件？或者其他可以工作的脚本？

仅调用 _setContainment() 方法也不起作用。

谢谢

Answer 1

我设法通过向函数添加整个代码并在“停止”回调期间再次运行它来解决这个问题。这样，draggable 就会通过更新的遏制重新重新启动。但我不确定这种方式的内存使用情况？

完整代码如下:

function init_draggable(){
            $(".ui-draggable").each(function(){
                var $this = $(this);
                var $left = parseInt($(this).parent().offset().left) + 100,
                $right = parseInt($(this).parent().next().offset().left) +  50;
                console.log($left);
                $(this).draggable({ 
                  axis: 'x', 
                  refreshPositions: true,
                  start: function(event, ui) {
                    elWidth = $(this).parent().width();
                    nextWidth = $(this).parent().next().width();
                  },
                  drag: function(event, ui) {
                    $(this).parent().width( elWidth + (ui.position.left-ui.originalPosition.left) );
                    $(this).parent().next().width( nextWidth - (ui.position.left-ui.originalPosition.left) );
                  },
                  stop: function(event, ui) {
                    $(".ui-draggable").each(function(){
                        $(this).css({"left":'auto','right':'0'});
                    });
                    init_draggable();
                  },
                    containment: [parseInt($(this).parent().offset().left) + 40,0,parseInt($(this).parent().next().offset().left + $(this).parent().next().width() - 40),0]
                });
            });
        }

        init_draggable();