Come faccio a trascinare una larghezza div?

Question

Ho un div nested all'interno di un altro div che viene utilizzato per visualizzare una console delle impostazioni. Il div nidificato ha un fisso posizionato all'interno del genitore come segue:

mi piacerebbe aggiungere un manico draggable al bordo sinistro del div bambino in modo che il div bambino può essere ridimensionata alla larghezza. Devo aggiungere un altro div molto stretto in cui il bordo della mano sinistra è posizionato in modo che questo possa essere trascinato e la posizione ricalcolata per ridimensionare dinamicamente la proprietà div divs bambino?

Preferisco attenermi a Vanilla JQuery se possibile, piuttosto che affidarmi all'interfaccia utente di JQuery.

Answer 1

Credo che questo è ciò che stai cercando

maniglie: che gestisce può essere utilizzato per il ridimensionamento.

Esempio:$(".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 
}); 

controllo questo JSFiddle

EDIT: Risolto il problema css, Updated fiddle

Answer 2

Utilizzare l'interazione ridimensionabile dell'interfaccia utente jQuery, come indicato nel commento. Date un'occhiata a questo esempio: http://jqueryui.com/resizable/#max-min

EDIT: per bloccarlo fino a solo il ridimensionamento della larghezza, impostare il MinHeight pari a maxHeight. Questo dovrebbe probabilmente farlo.

Codice dall'alto esempio:

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

EDIT 2: Per aplying gestisce eventuali modi diversi: leggere il doc http://api.jqueryui.com/resizable/#option-handles

Answer 3

Prova questo codice ..

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

È possibile aggiungere quindi una larghezza massima e minima

Answer 4

Ciò può essere ottenuto abbastanza facilmente con jQuery vaniglia per così dire. Suggerisco comunque di utilizzare un layout di markup più efficiente, o ti imbatterai in alcuni problemi relativi alla posizione/dimensione.

Vorrei utilizzare un contenitore e 2 bambini.In uno dei bambini (il secondo, o il lato destro) conterrà una maniglia trasparente ma di larghezza ridotta. Per il jQuery, devi solo collegare un evento del mouse a quella maniglia e regolare le dimensioni degli altri bambini di conseguenza. Ecco approssimativamente come andrà a finire.

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

Answer 5

È possibile anche allegare un gestore di eventi come mostrato qui sotto, che è utile se si vuole fare qualcosa al via o fine del ridimensionamento.

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

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

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

}); 

Ricordare che è necessario includere anche l'interfaccia utente di jQuery; scaricarlo e aggiungere qualcosa del genere:

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