jquery - Hình ảnh có thể kéo khi hình ảnh lớn hơn vùng chứa

Question

Làm cho hình ảnh có thể kéo được một số điều khá kỳ quặc khi hình ảnh lớn hơn vùng chứa ... Có ai biết cách này không?

Dưới đây là mã của tôi ...

<script type='text/javascript' src="scripts/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("img").draggable({ containment: "div", scroll: false }); 

    }); 

</script> 

<style type="text/css"> 
    div { 
     width:500px; 
     height:423px; 
     position:relative; 
     overflow:hidden; 
    } 
</style> 

và ...

<div> 
    <img src="images/map.jpg" width="1000" height="845" alt="Map" /> 
</div> 

Answer 1

Nó đang làm việc nếu bạn thiết lập các giới hạn bằng tay:

$("img").draggable({ containment: [0, 0, 500, 423], scroll: false }); 

Answer 2

Tôi không chắc chắn rằng bạn đang sử dụng có thể kéo đúng cách. Điểm của nó là lấy hình ảnh và đặt nó ở đâu đó. Nếu hình ảnh lớn hơn vùng chứa, bạn có thể biết bạn đang đặt hình ảnh ở đâu? Nó không giống như nếu bạn muốn lấy hình ảnh và làm cho cuộn container khi bạn kéo.

Bây giờ, điều đó nói rằng, tôi nghĩ rằng đó là một lỗi (hoặc có thể là một tính năng?) Mà làm cho các cạnh bên ngoài chụp các cạnh container nếu phần tử bên trong lớn hơn.

Bạn đang cố gắng cuộn bản đồ trong khi chuột được nhấp và kéo?