I made a sortable, resizable, draggable, with-clone portlet but when I resize it I run into a bug.
My script:
<script type="text/javascript">
$(function() {
$('#column开发者_StackOverflow社区1').draggable({
helper:'clone',
connectToSortable:'#sort',
handle:'.widget-head',
});
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({ axis: 'x',containment: 'parent',
resize:
function(event, ui)
{
ui.size.width = ui.originalSize.width;
}
});
}
});
});
</script>
I figured out that the problem was related to the styling and was able to fix it. The position changed to absolute every time I resized, so to handle that I'm using this:
$('#sort').sortable({
handle:'.widget-head',
connectWith: "#sort",
out: function (e,ui) {
$("#sort").children().resizable({
axis: 'x',
containment: 'parent',
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
(ui.helper).css({'position': '', 'top': '0px'});
}
});
}
});
精彩评论