gpt4 book ai didi

javascript - 1000 个元素的 Jquery 可拖动性能与重新渲染元素的对比

转载 作者:行者123 更新时间:2023-11-28 17:07:49 25 4
gpt4 key购买 nike

<分区>

我正在开发一个允许使用 Jquery 中的可拖动实用程序拖动图像的应用程序。有许多与图像关联的叠加 div,其中许多组件按像素位置定位。这些数字很容易就达到 1000 多个。

有没有人计算过拖动所有这些元素与仅拖动图像然后在拖动后重新渲染其他元素的性能数据?

我赞成后一种方法,但想看看是否有人有更多见解。


我最终使用了一个 svg 层,其中 Jquery 可拖动实用程序处于事件状态 $("#zones_imageSVG").draggable( "enable"); 和多个矩形,内部有圆圈。 svg 图层可以轻松拖动而不会出现滞后或跳过。这种方法绕过了多 div 层解决方案。

<svg id="zones_imageSVG" class="moveCursor" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="430" width="549.4444444444445" style="position: relative;">
<image id="zones_image" width="549.4444444444445" height="430" y="0" x="0" xlink:href="./images/testCampus1_HQ_floorA.jpg">
<circle id="icon_sensor0" class="handle_svgAttrCirc" cx="91.63777777777779" cy="287.14444444444445" r="1.9111111111111112" fill="red">
<circle id="icon_sensor1" class="handle_svgAttrCirc" cx="272.0466666666667" cy="332.9155555555556" r="1.9111111111111112" fill="red">
<circle id="icon_sensor2" class="handle_svgAttrCirc" cx="412.60888888888894" cy="221.40222222222224" r="1.9111111111111112" fill="red">
<circle id="icon_sensor3" class="handle_svgAttrCirc" cx="410.3155555555556" cy="103.8688888888889" r="1.9111111111111112" fill="red">
<rect id="idAttrRect0" class="handle_svgAttrRect" x="512.1777777777778" y="73.38666666666667" height="74" width="88" fill="#3196bd">
<rect id="idAttrRect1" class="handle_svgAttrRect" x="416.62222222222226" y="54.27555555555556" height="54" width="48" fill="#3196bd">
<rect id="idAttrRect2" class="handle_svgAttrRect" x="321.0666666666667" y="25.60888888888889" height="24" width="38" fill="#3196bd">
<rect id="idAttrRect3" class="handle_svgAttrRect" x="129.95555555555558" y="44.720000000000006" height="44" width="44" fill="#DC143C">
<rect id="idAttrRect4" class="handle_svgAttrRect" x="416.62222222222226" y="35.16444444444445" height="84" width="38" fill="#A1DC14">
</svg>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com