Question

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

是否有人在拖动所有这些元素时完成了性能数字与仅拖动图像然后在拖动后重新渲染其他元素？

我赞成后来的做法，但想知道某人是否有更多的洞察力。

我最终选择了一个单独的svg图层，其中Jquery draggable实用程序处于活动状态$("#zones_imageSVG").draggable( "enable" );，并且内部有多个rect，圆圈。 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>

Answer 1

快速示例显示1000个子项似乎不会导致问题。当然，YMMV取决于你的子项目有多复杂。

JSFiddle

生成样本div的代码：

$(function () {
    $(".dragMe").draggable();

    var $dragMe = $(".dragMe.filled");

    var maxTop = 250;
    var maxLeft = 400;

    for (i = 0; i < 1000; i++)
    {        
        var $newSubItem = $("<div />")
            .addClass("subItem");

        var randomLeft = Math.random() * maxLeft;
        var randomTop = Math.random() * maxTop;

        $newSubItem.css({
            left: randomLeft,
            top: randomTop
        });

        $dragMe.append($newSubItem);
    }
});

Jquery的性能可拖动1000s元素与重新渲染元素

1 个答案: