weixin_33713350 2012-08-15 00:05 采纳率: 0%
浏览 34

使用jQuery进行UI / DOM排序

So, I have scoured the internet to find help on this...

I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.

So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?

I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!

Thank you!

  • 写回答

1条回答 默认 最新

  • weixin_33725126 2012-08-15 03:31
    关注

    You're right, you can't animate elements by sorting.

    The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.

    Then you have something that, when changed in the right way, will give an animated effect.

    All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.

    Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :

    $(".bars").each(function(i, bar) {
        var $bar = $(bar);
        var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
        var height = ........;//expression that calculates or fetches the new height property for bar i
        $bar.animate({
            'margin-left': marginLeft,
            'height': height
        );
    })
    

    There's no need to sort anything or to use the data attribute.

    评论

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题