webentwicklung-frage-antwort-db.com.de

Wie mache ich eine Div-Breite ziehbar?

Ich habe ein div in ein anderes div geschachtelt, das zum Anzeigen einer Einstellungskonsole verwendet wird. Das verschachtelte div hat eine feste Position innerhalb des übergeordneten Elements:

Div arrangement

Ich möchte dem linken Rand des untergeordneten div einen ziehbaren Ziehpunkt hinzufügen, damit die Breite des untergeordneten div geändert werden kann. Muss ich ein weiteres sehr schmales div hinzufügen, an dem der linke Rand positioniert ist, damit dieser gezogen und die Position neu berechnet werden kann, um die untergeordnete divs width-Eigenschaft dynamisch zu skalieren?

Ich bleibe lieber bei Vanilla JQuery, wenn möglich, anstatt mich auf die JQuery-Benutzeroberfläche zu verlassen.

16
QFDev

Ich denke, das ist, wonach du suchst 

Ziehpunkte: Welche Ziehpunkte können zur Größenänderung verwendet werden.

Beispiel:$( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS: 

$('.child').resizable({
    handles: 'n,w,s,e',
    minWidth: 200,
    maxWidth: 400
});

check this JSFiddle

EDIT: Das CSS-Problem wurde behoben: aktualisierte Geige

15
Praveen

Dies kann man mit Vanilla jQuery sozusagen ganz leicht erreichen. Ich schlage jedoch vor, ein effizienteres Markup-Layout zu verwenden, oder Sie werden einige relative Positions-/Größenprobleme feststellen.

Ich würde einen Behälter und zwei Kinder benutzen. In einem der Kinder (das zweite oder die rechte Seite) wird ein Griff enthalten, der transparent ist, aber eine geringe Breite hat. Für die jQuery fügen Sie einfach ein Mouse Down-Ereignis an diesen Griff an und passen die Größe der anderen untergeordneten Elemente entsprechend an. Hier ist ungefähr, wie das aussehen wird.

HTML

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
    </div>
</div>

JavaScript

var isResizing = false,
    lastDownX = 0;

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

    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;
    });
});

JSFiddle

9

Verwenden Sie die jQuery UI Resizable-Interaktion, wie im Kommentar erwähnt. Sehen Sie sich dieses Beispiel an: http://jqueryui.com/resizable/#max-min

EDIT: Um die Einstellung nur auf die Breite zu beschränken, setzen Sie minHeight auf maxHeight. Das sollte es wohl tun.

Code aus dem obigen Beispiel:

$(function() {
  $( "#resizable" ).resizable({
    minHeight: 250,
    maxHeight: 250,
    minWidth: 200,
    maxWidth: 350
  });
});

EDIT 2: Für die Behandlung von Attitaten auf unterschiedliche Weise: Lesen Sie das Dokument http://api.jqueryui.com/resizable/#option-handles

3
AntonNiklasson

Versuchen Sie diesen Code ..

$('.child').resizable({
    handles: 'w'
});

Sie können dann eine maximale und minimale Breite hinzufügen

1
Sbml

Sie können auch einen Ereignishandler wie unten gezeigt anhängen, was nützlich ist, wenn Sie am Anfang oder am Ende der Größenänderung etwas unternehmen möchten. 

$("#resizeableElementId").resizable({handles: 'n,w,s,e', minWidth: 200, maxWidth: 600}); 

$("#resizeableElementId").on( "resizestop", function( event, ui ) {

    console.log('resize ended');
    console.dir(event);

});

Denken Sie daran, dass Sie auch die jQuery-Benutzeroberfläche hinzufügen müssen. Laden Sie es herunter und fügen Sie so etwas hinzu:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />
0
paulo62