jQuery с горизонтальной сортировкой и изменением размера заставляет элементы подпрыгивать при сортировке

Я использую jQuery для создания набора горизонтально сортируемых элементов, размер которых также можно изменить с помощью правого (восточного) дескриптора. Проблема в том, что после изменения размера элемента, когда я перемещаю его горизонтальное положение, во время перемещения элемент перескакивает в верхнюю часть страницы.

HTML

<div id="spacer"></div>
<div id="box">
    <div id="list">
        <div class="resize">ONE</div>
        <div class="resize">TWO</div>
        <div class="resize">THREE</div>
    </div>
</div>

ЯВАСКРИПТ

$(function() {
    $('#list').disableSelection().sortable({
        scroll: true,
        placeholder: 'placeholder',
        containment:'parent',
        axis: 'x'
    });
    $('.resize').resizable({
            handles: 'e'
         });
});

CSS

#spacer {height: 100px}
#box {
    height: 40px;
    width: 500px;
    float: left;
}

#list {
    background-color:blue;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
}
.resize {
    background-color:darkgray;
    height:40px;
    width:100px;
    cursor:move;
    display:inline-block;
}
.placeholder {
    display:inline-block;
    height: 1px !important;
}


.ui-resizable-handle {
 height:15px;  
 width: 20px; 
    background-color:red;
    cursor: pointer;
}

Что я делаю неправильно? jsFiddle здесь.


jquery jquery-ui resizable jquery-ui-sortable
person Andy R.    schedule 30.01.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

удалите «ось: x» из кода
измените часть jquery следующим образом..

$(function () {
    $('#list').sortable({
        scroll: true,
        placeholder: 'placeholder',
        containment: 'parent',
        //axis: 'x'
    });
    $('#list').disableSelection();
    $('.resize').resizable({
        handles: 'e'
    });
});
person Rinku    schedule 30.01.2013
comment
Да, это так. Спасибо! - person Andy R.; 30.01.2013

arrow_upward
0
arrow_downward

Если значение для оси определено, элементы можно перетаскивать только по горизонтали или по вертикали. Возможные значения: «х», «у». Я не уверен на 100%, но в вашем случае это противоречит изменению размера элемента.

Либо удалите ось, либо попробуйте

axis: 'xy'
person nrsharma    schedule 30.01.2013