Jquery UI sortable 检测上下轴答案

【问题标题】：Jquery UI sortable detects axis up and downJquery UI sortable 检测上下轴
【发布时间】：2015-03-27 15:12:33
【问题描述】：

我正在努力检测 N 轴是向上还是向下移动？而且我希望里面的物体（h2和p）保持在原位。有人可以帮忙吗！

http://jsfiddle.net/zerolfc/y62awe4u/2/

<div class="ss-zone-object" style="top: 68px; width:300px; height: 500px; left: 20px;">
    <h2 style="top: 100px; width: 60px;">Title</h2>
    <p style="left: 122px; top: 120px; width: 60px;">Summary</p>
</div>

 $(function () {
    $('.ss-zone-object').resizable({
        grid: [1, 1],
        handles: 'n,s',
        resize: function (e, ui) {
            var handle_axis = $(this).data('ui-resizable').axis;

            $(this).find('h2, p').each(function (mk, mv) {

                var obj_top = parseInt($(this).position().top);
                if (handle_axis === 'n') { // Axis N, moving down then minus one
                    $(this).css('top', (obj_top - 1) + 'px');
                } else if (handle_axis === 's') {

                }
            });

        },
        stop: function (e, ui) {}
    });
});

【问题讨论】：

“Jquery UI sortable 检测上下轴” ?, $('.ss-zone-object').resizable({ ?
api.jqueryui.com/resizable 阅读此内容可能会有所帮助..
您的问题能否更具体一点？ N轴是什么？你的意思是当你滚动时div里面的对象需要保持固定？

标签： javascript jquery jquery-ui resizable

【解决方案1】：

好吧，例如，这是：

$(function () {
    var s = $('h2').position().top;
    var p = $('h2').position().top;
    var height_font_s = 68; // define manual
    var height_font_p = 88; // define manual
    $('.ss-zone-object').resizable({
        grid: [1, 1],
        handles: 'n,s',
        resize: function (e, ui) {
            var handle_axis = $(this).data('ui-resizable').axis;
            var t = $('.ss-zone-object').position().top;
            $(this).find('h2').css('top', (-(t-(s+height_font_s)))+'px');
            $(this).find('p').css('top', (-(t-(p+height_font_p)))+'px');
        },
        stop: function (e, ui) {}
    });

})

.ss-zone-object {
    background-color: #ccc;
    position:absolute;
}
.ss-zone-object h2, .ss-zone-object p {
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="ss-zone-object" style="top: 68px; width:300px; height: 500px; left: 20px;">
     <h2 style="top: 100px; width: 60px;">Title</h2>

    <p style="left: 122px; top: 120px; width: 60px;">Summary</p>
</div>

【讨论】：

【解决方案2】：

不太确定您要在这里实现什么。

我正在努力检测 N 轴是向上还是向下移动？

如果您想检测轴（N 或 S），您只需在调整大小事件处理程序中检查以下内容：

var handle_axis = ui.originalPosition.top === ui.position.top ? "s" : "n";

而且我希望里面的物体（h2 和 p）保持在原位。

调整南轴的大小时，没有问题，因为元素位于容器的顶部。

当调整北轴的大小时，两个元素的顶部位置相对于父元素永远不会改变。但是，您可以使用 ui.originalSize 和 ui.size 找出新的顶部位置。或者只是将位置设置为固定。

【讨论】：

【解决方案3】：

我设法通过添加临时克隆 div 来做到这一点。

http://jsfiddle.net/zerolfc/y62awe4u/9/

$('.ss-zone-clone').resizable({
        grid: [1, 1],
        handles: 'n,s',
        containtment: 'parent',
        start: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                    'z-index': 1
            });
        },
        resize: function (e, ui) {
            var handle_axis = $(this).data('ui-resizable').axis;
        },
        stop: function (e, ui) {
            $(this).css({
                'background': 'rgba(255,255,255,0.5)',
                    'z-index': 0
            });

            var h2_top = $('.ss-zone-object').find('h2').position().top;

            var orig_top = ui.originalPosition.top;
            var cur_top = ui.position.top;
            var new_top;

            new_top = (cur_top - orig_top);

            $('.ss-zone-object').css({
                'height': ui.size.height + 'px',
                    'top': cur_top + 'px'
            });

            $('.ss-zone-object').find('h2').css('top', (h2_top - new_top));

        }
    });

【讨论】：