Thiết giới hạn ranh giới cho một đối tượng có thể kéo

Tôi có hai yếu tố:Thiết giới hạn ranh giới cho một đối tượng có thể kéo

1. Một phụ huynh chiều cao cố định, overflow:hidden

2. con của nó, chiều cao cố định lớn hơn.

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

Tôi muốn có thể kéo danh sách lên và xuống trong div chính. Tôi đang sử dụng các plugin jquery ui kéo để đạt được verticle kéo, nhưng tôi không chắc chắn làm thế nào để hạn chế danh sách trong div cha.

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

Tôi làm cách nào để đặt giới hạn trên và dưới cho vertistion của danh sách?

Nguồn

2009-10-10 Paul

Ok,

Đây là con đường tôi đã đi xuống ...

Khi trang web được tải, tôi thêm một div container xung quanh kéo danh sách. Tôi đặt chiều cao của nó gấp hai lần danh sách, sau đó đặt nó lên một chút:

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

Danh sách này sau đó được chứa trong phần tử mới này.

Điều này dường như thực hiện công việc, nhưng vị trí hơi rung lên một chút nếu danh sách có bất kỳ khoảng đệm/lề nào được áp dụng. Bất kỳ suy nghĩ về điều đó sẽ được appreicated!

------ Chỉnh sửa ---------

Ok, tôi nghĩ rằng tôi đã giải quyết được vấn đề về vị trí. Tôi đã biến điều này thành một plugin để những người khác không phải mất thời gian tạo chức năng này.

jQuery Drag-gable List at Github

Nguồn

2009-10-10 15:08:10 Paul

cách tiếp cận rất rất tốt đẹp, để thêm một cửa sổ cuộn khác với một số kích thước khác là rất tốt đẹp. Tuyệt vời Paul .. –

Sử dụng containment option:

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

Nguồn

2009-10-10 11:08:26 moff

Bố mẹ có kích thước nhỏ hơn con - khi tôi thử tùy chọn này, thao tác kéo không hoạt động - danh sách chỉ cần nhảy giữa các vị trí trên cùng và dưới cùng – Paul

Điều này thật tuyệt vời.dễ dàng – Tushortz

Tôi gặp vấn đề tương tự và câu trả lời không giúp ích gì cho tôi. Một số javascript sau này tôi nghĩ rằng sau đây là một giải pháp tốt hơn.

(Bất kỳ ai biết làm thế nào để tắt chức năng này vào một 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>

Nguồn

2010-12-03 15:03:16 Lode

Bạn không cần phải kéo bất cứ điều gì cho rằng loại cấu trúc. Những gì bạn cần là thiết lập div cha với overflow-x: hidden; và overflow-y: scroll ;. Bằng cách đó, nội dung của nó sẽ có thể cuộn được.

Nếu bạn muốn ẩn thanh cuộn, chỉ cần đặt thuộc tính này: .dragPanel :: - webkit-scrollbar {width: 0! Important} và đó là nó! Tôi không thực sự biết tại sao bạn đang nghĩ đến việc kéo các phần tử thay vì chỉ cuộn nội dung (đó là cách chính xác để thực hiện loại "vấn đề" này). Dù sao, tôi hy vọng nó sẽ giúp bất cứ ai cần phải phù hợp với cùng một necesity. Lời chào hỏi!

Nguồn

2017-09-23 01:15:38 Criss

Thiết giới hạn ranh giới cho một đối tượng có thể kéo

Trả lời

Các vấn đề liên quan