jQuery水平可排序和可调整大小使元素在排序时跳跃答案

【问题标题】：jQuery horizontal sortable and resizable makes elements jump up when sortingjQuery水平可排序和可调整大小使元素在排序时跳跃
【发布时间】：2013-01-30 07:20:48
【问题描述】：

我正在使用 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>

JAVASCRIPT

$(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 是here。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable resizable

【解决方案1】：

从您的代码中删除“axis:x”
如下更改您的 jquery 部分..

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

【讨论】：

是的，就是这样。谢谢！

【解决方案2】：

如果定义了轴的值，则只能水平或垂直拖动项目。可能的值：“x”、“y”。我不是 100% 确定，但在你的情况下，它与调整元素的大小相冲突。

要么移除轴，要么尝试

axis: 'xy'

【讨论】：