impostazione dei limiti al contorno per un oggetto trascinabile

Ho due elementi:impostazione dei limiti al contorno per un oggetto trascinabile

1. Un genitore di altezza fissa, overflow:hidden

2. Il suo bambino, di grande altezza fissa.

<style type="text/css"> 
    .myList {list-style:none; margin:0px; padding:1px;} 
    .myList li{ height:50px; margin:4px; padding:2px;} 
    .dragPanel {height:230px; border:solid; overflow:hidden;} 
</style> 

<div class="dragPanel"> 
    <ul class="myList"> 
     <li>1</li> 
     <li>2</li> 
     ... .... 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</div>

Voglio essere in grado di trascinare l'elenco su e giù all'interno del div padre. Sto usando il plugin jquery ui trascinabile per ottenere il trascinamento del verticle, ma non sono sicuro di come vincolare la lista all'interno del div padre.

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y' }); 
    }); 
</script>

Come dovrei andare a impostare i limiti superiore e inferiore del verticle per la posizione dell'elenco?

fonte

2009-10-10 Paul

Ok,

Ecco l'itinerario sono andato giù ...

Quando la pagina viene caricata, aggiungo un div contenitore di tutto il trascinabili elenco. Ho impostato è l'altezza a due volte quella della lista, poi posizionarlo la pagina un po ':

<script type="text/javascript"> 
    $(document).ready(function() { 
     CreateContainerDiv(); 
     $('.dragPanel').addClass("hover"); 
     $('.myList').draggable({ axis: 'y', containment: 'parent' }); 
    }); 

    function CreateContainerDiv() { 
     var dragPanel = $('.dragPanel'); 
     var dragTarget = $('.myList'); 

     // add the container panel 
     var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight(); 
     dragTarget.wrap(document.createElement("div")); 

     // set its height and put it in the right place 
     dragTarget.parent().css("height", newPanelHeight); 
     dragTarget.parent().css("position", "relative"); 
     var newPanelPosition = ((dragTarget.outerHeight() * -1)/2); 
     dragTarget.parent().css("top", newPanelPosition);   
    } 
</script>

la lista è poi contenuta a questo nuovo elemento.

Questo sembra fare il lavoro, ma il posizionamento è tutto un po 'di shakey se l'elenco ha un padding/margine applicato. Qualsiasi pensiero su questo sarebbe apprezzato!

------ Modifica ---------

Ok, penso di avere risolto il problema di collocamento. Ho trasformato questo in un plugin in modo che altre persone non debbano perdere tempo a creare questa funzionalità.

jQuery Drag-gable List at Github

fonte

2009-10-10 15:08:10 Paul

molto molto bello, per aggiungere un altro riquadro di scorrimento con qualche altra dimensione è molto bello.Ottimo Paul .. –

Utilizzare la containment option:

$('.myList').draggable({ 
    axis: 'y', 
    containment: 'parent' 
});

fonte

2009-10-10 11:08:26 moff

Il genitore è più piccolo del suo bambino - quando provo questa opzione il trascinamento non funziona - l'elenco è solo una sorta di salti tra le posizioni in alto e in basso – Paul

Questo è stato fantastico.facile approccio – Tushortz

ho avuto gli stessi problemi e le risposte non mi ha aiutato. Alcuni javascript in seguito penso che la seguente sia una soluzione migliore.

(qualcuno sa come trasformare questo in un plugin jQuery?)

<!DOCTYPE html> 
<html> 
<head> 
    <title>Draggable limited to the container</title> 
    <style type="text/css"> 
    #container { 
     cursor: move; 
     overflow: hidden; 
     width: 300px; 
     height: 300px; 
     border: 1px solid black; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $.globalVars = { 
      originalTop: 0, 
      originalLeft: 0, 
      maxHeight: $("#draggable").height() - $("#container").height(), 
      maxWidth: $("#draggable").width() - $("#container").width() 
     }; 
     $("#draggable").draggable({ 
      start: function(event, ui) { 
       if (ui.position != undefined) { 
        $.globalVars.originalTop = ui.position.top; 
        $.globalVars.originalLeft = ui.position.left; 
       } 
      }, 
      drag: function(event, ui) { 
       var newTop = ui.position.top; 
       var newLeft = ui.position.left; 
       if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) { 
        newTop = $.globalVars.maxHeight * -1; 
       } 
       if (ui.position.top > 0) { 
        newTop = 0; 
       } 
       if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) { 
        newLeft = $.globalVars.maxWidth * -1; 
       } 
       if (ui.position.left > 0) { 
        newLeft = 0; 
       } 
       ui.position.top = newTop; 
       ui.position.left = newLeft; 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <img id="draggable" src="avatar.jpg" /> 
    </div> 
</body> 
</html>

fonte

2010-12-03 15:03:16 Lode

Non devi trascinare qualsiasi cosa per quel tipo di struttura. Quello di cui hai bisogno è impostare il div padre con overflow-x: hidden; e overflow-y: scroll ;. In questo modo, il suo contenuto sarà scorrevole.

Se si desidera nascondere la barra di scorrimento, basta mettere questa proprietà: .dragPanel :: - webkit-scrollbar {width: 0! Important} e il gioco è fatto! Non so davvero perché stavi pensando di trascinare elementi invece di scrollare semplicemente il contenuto (che è il modo corretto per eseguire questo tipo di "problemi"). Comunque, spero che aiuti chiunque abbia bisogno di adattarsi alla stessa necessità. Saluti!

fonte

2017-09-23 01:15:38 Criss

impostazione dei limiti al contorno per un oggetto trascinabile

risposta

Problemi correlati