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

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

3 голосов
/ 27 мая 2011

Я использую плагин 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>

Вопрос : Как сделать так, чтобы перетаскиваемый элемент <img> отображался как скользящий под родительским элементом <div> при перетаскивании, но без появления полос прокрутки?

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

Ответы [ 2 ]

3 голосов
/ 27 мая 2011

@ 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;
}
3 голосов
/ 27 мая 2011

Звучит так, как будто вы должны установить: 

overflow:hidden;

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

...