Ändern der Größe eines div-auf der Grenze drag-and-drop ohne zusätzliches markup

Ich eine absolute positioniert Seitenteil, und ich brauche zum ändern der Breite durch ziehen dieser Grenze. Auch ich brauche zu ändern, cursor auf der Grenze schweben. Ist es möglich dies zu tun ohne das hinzufügen eines weiteren div für das ziehen?

Hier ist das markup:

CSS:

#right_panel {
    position: absolute;
    border-left: solid 3px #ccc;
    width: 100px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

HTML:

<body>
    <div id="right_panel"></div>
</body>

Ich brauche keine vollständige Lösung. Ja (Dokumentation, Referenz)/Nein Antwort ist ausreichend. Ich brauche nicht eine Antwort mit einem Helfer, der div. Ich habe schon eine:

JS:

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.x;
    m_pos = e.x;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

CSS:

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0f0;
}

#resize {
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

HTML:

<body>
    <div id="right_panel">
        <div id="resize"></div>
    </div>
</body>

Wieder, dies ist die Funktionalität, die ich will, außer ich will zu entfernen, die gegen div.

Ich nehme an, du meinst 'ziehen'. Hast du Javascript für diese oder Fragen Sie uns, es zu schreiben für Sie?
wenigstens zeigen einige code, die Sie bereits versucht haben und nicht gearbeitet
Ich Frage, ist es möglich oder nicht und einige Empfehlungen. Ich weiß nicht brauchen, um dieses problem zu lösen, weil ich bereits eine Lösung mit einem anderen div-Tag für ziehen und ändern der Größe übergeordneten div. Ich will nur, um die markup-cleaner. Hier ist die Lösung mit einem anderen div: jsfiddle.net/kxr96dzg/1 Und sorry. Englisch ist nicht meine Muttersprache.
Ich für meinen code. Können Sie jetzt helfen?
In falls Sie es verpasst, ich habe eine Antwort, die funktionieren könnte für Sie (ein bisschen spät, aber ich hoffe, es hilft!) -- stackoverflow.com/a/53220241/428486

InformationsquelleAutor Anton | 2014-10-07

Ist es sicherlich möglich dies zu tun ohne einen extra div. Verwenden Sie css und :after zu erstellen, die Grenze, und ändern Sie die cursor. Verwenden MouseEvent.offsetX, um zu bestimmen, ob ein Klick in das element.

In Ihrem Beispiel, Sie wollen ein Klick auf das main-div, sondern nur auf die ersten 4 Pixel. Sie können das tun, indem Sie für e.offsetX < 4 im click-handler:

JS:

const BORDER_SIZE = 4;
const panel = document.getElementById("right_panel");

let m_pos;
function resize(e){
  const dx = m_pos - e.x;
  m_pos = e.x;
  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
}

panel.addEventListener("mousedown", function(e){
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);

CSS:

#right_panel {
    position: absolute;
    width: 96px;
    padding-left: 4px;
    height: 100%;
    right: 0;
    background-color: #f0f0ff;
}

#right_panel:after {
 content: " ";
    background-color: #ccc;
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

HTML:

<body>
    <div id="right_panel"></div>
</body>

InformationsquelleAutor lucascaro

ich hoffe, es kann Ihnen helfen,

http://jsfiddle.net/T4St6/82/

<div id="container">
    <div id="left_panel"> left content! </div>
    <div id="right_panel">
        <div id="drag"></div> right content!
    </div>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;

}
 #left_panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: grey;
}

#right_panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    color:#fff;
    background: black;
}
 #drag {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

JQUERY

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        left = $('#left_panel'),
        right = $('#right_panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function (e) {
        //we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css('right', offsetRight);
        right.css('width', offsetRight);
    }).on('mouseup', function (e) {
        //stop resizing
        isResizing = false;
    });
});

Danke. Es ist eine funktionierende Lösung, aber ich versuche, dies zu tun, ohne einen Helfer für div ziehen.
Fügen Sie "return false" am Ende der mousemove-callback um zu verhindern, dass die Auswahl von text in die divs.
ist das auch machbar in bootstrap?
können Sie bitte erklären, was Sie erreichen wollen? möchten Sie die Verwendung von bootstrap.css?
ja, kann dieses layout erreicht werden mit der bootstrap-Spalten
ja, es ist möglich, Sie müssen finden Sie die richtigen css-Klassen von bootstrap, auch die Mischung der Klassen.

InformationsquelleAutor Manjunath Siddappa

Ohne jQuery:

<head>
    <style>
        body {
            font-family: Helvetica, Arial;
            font-size: 12px;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100%;
            height: 100%;    
        }

        #left_panel {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 100px;
            background: grey;
        }

        #right_panel {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            color: #fff;
            background: black;
        }

        #drag {
            position: absolute;
            left: -4px;
            top: 0;
            bottom: 0;
            width: 8px;
            cursor: w-resize;
        }

    </style>
</head>

<body>

    <div id="container">
        <div id="left_panel"> left content! </div>
        <div id="right_panel">
            <div id="drag"></div> right content!
        </div>
    </div>

    <script>
        var isResizing = false,
            lastDownX = 0;

        (function() {
            var container = document.getElementById("container"),
                left = document.getElementById("left_panel"),
                right = document.getElementById("right_panel"),
                handle = document.getElementById("drag");

            handle.onmousedown = function(e) {
                isResizing = true;
                lastDownX = e.clientX;
            };

            document.onmousemove = function(e) {
                //we don't want to do anything if we aren't resizing.
                if (!isResizing) {
                    return;
                }

                var offsetRight = container.clientWidth - (e.clientX - container.offsetLeft);

                left.style.right = offsetRight + "px"; 
                right.style.width = offsetRight + "px"; 
            }

            document.onmouseup = function(e) {
                //stop resizing
                isResizing = false;
            }
        })();


    </script>

</body>

InformationsquelleAutor parag

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.