JQuery Draggable - ограничить родительским, но разрешить скольжение под родительским?

Я использую плагин JQuery Draggable. Я пытаюсь создать элемент управления для редактирования изображений, где пользователь может переместить (и в конечном итоге изменить размер) перетаскиваемое изображение. Если вы посмотрите на демо здесь, вы увидите, что вы можете перетащить серое поле вокруг, и если оно выходит за границы рамки, вы увидите полосы прокрутки и можете продолжать перетаскивание. Я хотел бы достичь той же функциональности без полос прокрутки. Вы должны иметь возможность перетаскивать изображение, и если изображение выходит за границы рамки, оно должно скользить под рамкой. Рамка не должна увеличиваться или иметь полосы прокрутки. Я думаю, что это возможно, но я не нашел способа сделать это с помощью документации, которую нашел. Вот мой код:

<head>
<meta charset="UTF-8" />
<title></title>
    <style type="text/css">
        #draggable { width: 400px; height: 300px; cursor:pointer;}
        #container{overflow:hidden; height: 500px; width: 500px; border: solid 1px black;}
        #slider{margin: 10px; border: solid 1px black; height: 300px; vertical-align:middle;}
    </style>

      <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%>
    <script src="scripts/jquery.js" type="text/javascript"></script>

    <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">
          $(document).ready(function() {
              $("#draggable").draggable({ opacity: 0.35 }); //, helper: 'original', containment: 'parent'
          });
    </script>
</head>

<body>
    <div id="container">
        <img  id="draggable" src="images/96.jpg" width="400px" height="300px" alt="Click this image to drag it around" />
    </div>
</body>

Вопрос: Как я могу сделать draggable <img> появляются, чтобы скользить под родителем <div> при перетаскивании - но без появления полос прокрутки?

ОБНОВЛЕНИЕ: Чем больше я думаю об этом, тем больше я думаю, что я должен переформулировать свой вопрос. Что я действительно хочу сделать, это сделать моих родителей <div> пометить как маску / обтравочный контур вокруг моего перетаскивания <img>, Изображение внутри может быть больше, чем <div> но только то, что в <div> будет видно Вы должны быть в состоянии перетащить <img> вокруг внутри <div> как пожелаете.

Источник

2 ответа

Решение

@bOkeifus прав. Проверьте это рабочее демо jsFiddle:

JS:

$(document).ready(function() {
    $("#draggable").draggable({ opacity: 0.35 });
});

HTML:

<div id="container">
    <img id="draggable" 
         alt="Click this image to drag it around"             
         src="http://gallery.photo.net/photo/12355172-md.jpg" 
         width="400px"
         height="300px" />
</div>

CSS:

#container { 
    overflow: hidden; 
    height: 500px; 
    width: 500px; 
    border: solid 1px black;
}
Источник

Похоже, вы должны установить:

overflow:hidden;

в стиле вашего дива. Это должно остановить полосы прокрутки от появления.

Источник
Другие вопросы по тегам