Question

我的行里面有多个列。列宽由列数分隔，达到行宽的100％。用户可以通过拖动其边缘来更新列宽。我一直在谷歌搜索一个像这样的http://dobtco.github.io/jquery-resizable-columns/这样的脚本，但这对div而不是表格列有效，而且没有运气。

所以我选择了可拖动的解决方案，但因为它没有＆＃34;遏制＆＃34;拖动期间或拖动后更新。我不得不更改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];

内部＆＃34; _setContainment＆＃34;方法。

在_mouseStop()内部，名为this._setContainment();

有没有解决方法，所以我不必更改核心文件？或者其他一些可行的脚本？

只是调用_setContainment（）方法也不起作用。

由于

Answer 1

我设法通过在函数中添加整个代码并在＆＃34;停止＆＃34;期间再次运行它来解决它。打回来。通过更新的收容措施再次重新启动可拖动的方式。但我不确定这种方式的内存使用情况？

以下是完整代码：

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();

JS - jQuery draggable可调整大小的多个div在容器中互相推送

1 个答案: