Запрет скрола в draggable за пределы родительского блока?

Question

[Максим Медведев]

Привет,

Есть такая раметка:

<div class="pipeline_scroll">
        <div class="pipeline_body">
            <div class="pipeline_row">
                 
                 <div class="pipeline_cell">...</div>
                 <div class="pipeline_cell">...</div>
                 ...
            </div>
      </div>
</div>

Стили:

.pipeline_body {
    display: table;
    table-layout: fixed;
    min-width: 100%;
    vertical-align: baseline;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
.pipeline_row {
    display: table-row;
}
.pipeline_row .pipeline_cell {
    display: table-cell;
    width: 282px;
    min-width: 282px;
    max-width: 282px;
    vertical-align: top;
    padding:0 10px;
}

js:

$(".pipeline_body").draggable({
                axis: "x",
                cursor: "move",
            });

Проблема в следующем: pipeline_cell может быть много, вытянуты они в одну строку. мне нужно, чтобы была возможность перетаскиванием мышки скролить блок с этими pipeline_cell. про существование containment параметра знаю, но он не срабатывает, когда родительский блок меньше вложенных по размерам. как решить вопрос и запретить скролить за пределы родительского блока?

Answer 1

[Максим Медведев]

решил сделать так

$(".pipeline_body").draggable({
                axis: "x",
                cursor: "move",
                stop: function(event, ui) { 
                        if($(this).offset().left > 0) {
                            $(this).css("left",0);
  }

                }
            });

но это для ограничение по левой стороне, как правильно обсчитать правую сторону?

Comments

[Максим Медведев]

jsfiddle.net/yc5f9ym6/5