我很难检测 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) {}
});
});
最佳答案
好的,例如,这是:
$(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>
关于javascript - jquery UI sortable检测上下轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29304039/