0

我有$(document).ready(function()以下代码：

$(".resizable" ).resizable({
    handles: 'n',
    minHeight: 1,
    minWidth: maxBarWidth,
    maxHeight: maxBarHeight,
    maxWidth: maxBarWidth
});

这允许我在我创建的条形图上调整条形 (DIV) 的大小。它在页面加载后工作。当我调整栏的大小时，我会运行一些代码来为栏设置动画并更新它位于栏上的标签。问题是顶部手柄消失了，我无法再调整任何条的大小。任何想法？

这里有更多代码：

$(document).ready(function(){
//position and draw bars
setBarPosition();

//make bars resizable with mouse and set their max and min dimentions
var maxBarWidth = $('.graphBar').width();
var maxBarHeight = $('.graphArea').height();

//activate resize on bars
$(".resizable" ).resizable(
    {handles: 'n', minHeight: 1, minWidth: maxBarWidth, maxHeight: maxBarHeight,     maxWidth: maxBarWidth}
);

//update input fields and graph labels after bars resizing
$(".resizable" ).bind( "resizestop", function(event, ui) {
    targetInput = $(this).attr("label");
    $('input[name=' + targetInput +   ']').val(Math.round($(this).height()/window.chartScale));
    setBarPosition()    
});

});

function setBarPosition(){
window.chartHeight = Number($('.graphArea').height());
window.barWidth = $('.graphArea .graphBar').width();
window.highestYlabel = Number($('.graphYAxis p').first().html());
window.chartHeightArea = window.chartHeight - Number($('p.axis-  value').first().height());
window.chartScale = chartHeightArea / window.highestYlabel;
window.barSpacing = Number($('.graphArea').attr('barSpacing'));

$orderNo = 1;
$itemNo = 1;

//count how many bars are present and calculate incremental position
$('.graphArea .graphBar').each(function(index){

//if bar is from second series then attach to the side of the previous one
if (index%2 == 0)
    {
        var barPosition = (index * barWidth) + (index * window.barSpacing) +   window.barSpacing;       
    }
else
    {
        var barPosition = (index * barWidth) + (index * window.barSpacing); 
    }

//assign left position to each bar
$(this).css('left', barPosition + 'px');

//add numeric values on bars. Values are read from input form
if (index%2 == 0)
    {
        elementName = 'orders' + $orderNo; 
        $orderNo = $orderNo + 1;        
    }
else
    {
        elementName = 'items' + $itemNo;
        $itemNo = $itemNo + 1;      
    }

//attach paragraphs holding the bar heights to the divs generating the bars 
currentBarValue = $('input[name="'+ elementName +'"]').val();
$(this).attr('barValue', currentBarValue);
$(this).html('<p class="resizable" title="' + elementName + '">' + $(this).attr('barValue') + '</p>');

//add X axis labels
$('.graphXAxis').append('<p style="left:' + (barPosition - (window.barWidth/2)) + 'px">' + $(this).attr('label') + '<p>');

//find out the bar with the maximum value assigned
var barValue = Number($(this).attr('barValue'));

if (barValue > window.maxValue) 
    {
        window.maxValue = barValue;
    }

//calculate value to display
window.valueMultiplier = window.maxValue / window.highestYlabel;

 });

//animate bars and labels
runAnimation();
}

function runAnimation(){
$('.graphArea .graphBar').each(function(index){
    //calculate relative bar heights
    var scaledValue = Number($(this).attr('barValue')) * window.chartScale; 
    var delayTime = 125 * index;

    //animate bars
    $(this).delay(delayTime).animate({height:scaledValue},1000,function(){
        //for each children element apply delay (in built JQUERY function)
        $(this).children('p').delay(500).fadeIn(250);   
    });
});
}

非常感谢您的帮助，

多纳托

4

0 回答 0