Ustawianie ograniczenia brzegowe dla Draggable obiektu

Mam dwa elementy:Ustawianie ograniczenia brzegowe dla Draggable obiektu

1. rodzicem stałej wysokości, overflow:hidden

2. Jego dziecko, o większej wysokości stałej.

<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>

Chcę móc przeciągać listę w górę iw dół w div jednostki nadrzędnej. Korzystam z wtyczki jquery ui do przeciągnięcia w pionie, ale nie jestem pewien, jak ograniczyć listę w div jednostki nadrzędnej.

<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>

W jaki sposób mogę określić górną i dolną granicę vertitu dla pozycji na liście?

Źródło

2009-10-10 Paul

Ok,

Oto trasa I poszły w dół ...

Po załadowaniu strony, dodaję div pojemnika wokół przeciągany lista. I ustawić jego wysokość na dwa razy, że z listy, a następnie umieścić go na stronie trochę:

<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>

Lista jest następnie zawarty do tego nowego elementu.

Wygląda na to, że zadanie jest wykonywane, ale pozycjonowanie jest trochę tandetne, jeśli lista ma wypełnienie/margines. Wszelkie przemyślenia na ten temat zostaną docenione!

------ Edycja ---------

Ok, myślę, że rozwiązali problem kwalifikacyjny. Przekształciłem to w wtyczkę, aby inne osoby nie musiały tracić czasu na tworzenie tej funkcjonalności.

jQuery Drag-gable List at Github

Źródło

2009-10-10 15:08:10 Paul

bardzo ładne podejście, aby dodać kolejny panel przewijania z innym rozmiarem jest bardzo miły. Doskonały Paul .. –

Użyj containment option:

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

Źródło

2009-10-10 11:08:26 moff

Rodzic ma mniejszy rozmiar niż jego dziecko - gdy próbuję tej opcji przeciąganie nie działa - lista jest rodzajem skoków między górną a dolną pozycją. – Paul

To było niesamowite.easy – Tushortz

miałem te same problemy, a odpowiedzi nie może mi pomóc. Niektóre javascript później myślę, że poniższe jest lepszym rozwiązaniem.

(ktoś wie jak włączyć ten plugin do 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>

Źródło

2010-12-03 15:03:16 Lode

Nie musisz przeciągnąć wszystko dla tego rodzaju konstrukcji. To, czego potrzebujesz, to ustawienie div jednostki nadrzędnej z overflow-x: hidden; i overflow-y: scroll ;. W ten sposób jego treść będzie przewijana.

Jeśli chcesz ukryć pasek przewijania, po prostu wstaw tę właściwość: .dragPanel :: - webkit-scrollbar {width: 0! Important} i gotowe! Naprawdę nie wiem, dlaczego myślałeś o przeciągnięciu elementów, a nie tylko przewijaniu treści (co jest właściwym sposobem realizacji tego rodzaju "problemów"). Tak czy inaczej, mam nadzieję, że pomoże każdemu, kto potrzebuje dopasować tę samą koniecznością. Pozdrowienia!

Źródło

2017-09-23 01:15:38 Criss

Ustawianie ograniczenia brzegowe dla Draggable obiektu

Odpowiedz

Powiązane problemy