Question

我目前正在开发自定义调整大小功能，允许用户拖动两个div之间的垂直边框以相对于彼此调整其宽度。我通过创建一个宽度为10px的不可见的第三个div来实现这一点，它具有调整大小的光标并位于两个元素之间的边界顶部。当用户点击不可见的第3个div并拖动它时，事件监听器会更改左侧元素的宽度，然后相应地重新定位第3个div。

然而，我收到一个奇怪的错误，在更改宽度后，左边的元素似乎消失/被删除。我已经通过在控制台之前和之后执行$("#divID").length来验证这一点。在显示计数为1之后，显示计数为0.这导致使用$("#divID").offset()函数的其中一个函数出错。

以下是相关代码。 $("#"+resultsDiv)是我之前提到过的左侧。

/**
 * This will create an invisible div between the results pane (left) and map (right) that will allow the user to click and resize
 */
function handleResize() {
    let e = document.createElement('div');
    setResizeProperties(e);

    document.body.appendChild(e);

    $(e).mousedown(function() {
        $("#"+resultsDiv).mousemove(function(el) {
            doResize(el,$(this));
        });

    }).mouseup(function() {
        $("#"+resultsDiv).unbind("mousemove",doResize);
    });

    $(window).resize(function() {
        setResizeProperties(e);
    });
}

/**
 * Actually change the length
 * @param el to get mouse page X from
 * @param e of the invisible resize handle object
 */
function doResize(el,e) {
    console.log($("#"+resultsDiv).width());
    $("#"+resultsDiv).css("width",(el.pageX - 10 - $("#"+resultsDiv).offset().left));
    console.log($("#"+resultsDiv).width());
    console.log();
    setResizeProperties(e);
}

/**
 * Set the resize properties for the div element
 * @param e of the invisible resize handle obbject
 */
function setResizeProperties(e) {
    $(e).attr("id","resizeHandler");
    //$(e).css("visibility","hidden");
    $(e).css("background-color","red");
    $(e).css("width","20px");
    $(e).css("height",$("#gMapContainer").css("height"));
    $(e).css("cursor","ew-resize");
    $(e).css("position","absolute");

    console.log($("#"+resultsDiv).length);

    $(e).css("left",$("#"+resultsDiv).width() + $("#"+resultsDiv).offset().left);
    $(e).css("top",$("#resultsContainer").offset().top);
    $(e).css("z-index",10000);
}

以下是JS小提琴的链接： https://jsfiddle.net/BrandonQDixon/pt70yLbs/

如果尚未设置，则使用最新版本的JQuery。

更改宽度后元素消失

0 个答案: