Обеспечение начального сдерживания перетаскиваемого JQuery - PullRequest
Новая
       15

Обеспечение начального сдерживания перетаскиваемого JQuery

1 голос
/ 04 февраля 2011

Для фотографии веб-страницы, я реализую просмотр изображений, который позволяет выбрать область интереса уменьшенного эталонного изображения путем перетаскивания полупрозрачный прямоугольника на опорном изображение. Выбранная область непрерывно «зеркально отображается» для второго средства просмотра изображений, которое показывает область с коэффициентом увеличения 100%.

Мое решение использует XHTML / CSS и jQuery, и у меня есть базовая версия, которая уже работает - но страдает от проблемы при инициализации, которую я не могу решить. Я установил область интереса как div, которая сделана перетаскиваемой с помощью перетаскиваемого пользовательского интерфейса jQuery. Чтобы ограничить область интереса для изображения, я использовал свойство containment.

Первоначально, однако, div показывается за пределами изображения. Как только я начинаю перетаскивать интересующую область div, div привязывается к внутренней части изображения, и сдерживание должным образом применяется в дальнейшем. Весь пример кода, который я нашел, демонстрирует содержание с вложенными div s, что не относится к моему случаю, поскольку, насколько мне известно, изображение (XHML img) не может содержать другие элементы.

Есть ли способ, как я могу обеспечить, чтобы перетаскиваемая область интереса div уже содержалась, когда веб-страница первоначально отображается?

Я извлек минимальный код, чтобы проиллюстрировать проблему из моего кода, см. Ниже.

Буду рад любой подсказке.

Ура, Christian 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("#zoom_area").draggable( {
            containment: '#the_image'
        });
    });

    </script>

<style type="text/css">

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

</style>

</head>
<body>

<div id="image_viewer">
    <img id="the_image" src="img/img1.jpg" alt="reference image" />
</div>

<div id="zoom_area">
</div>

</body>
</html>

1 Ответ

2 голосов
/ 04 февраля 2011

Есть два способа сделать это.Во-первых, вы можете попробовать сделать это без тега изображения.Попробуйте поместить #zoom_area в #image_viewer и использовать фоновое изображение CSS, чтобы включить изображение, а не изображение.

HTML: 

<div id="the_image">    
    <div id="zoom_area"></div>
</div>

CSS: 

#the_image {
    width: 640px;
    height: 427px;
    background-image:url('img/img1.jpg');
}

#zoom_area {
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

См. Этот первый пример в действии: http://jsfiddle.net/qUtEW/

Если вам нужно использовать тег изображения, вы можете использовать следующий код:

HTML 

<div id="image_viewer"> 
        <img id="the_image" src="img/img1.jpg" alt="reference image" /> 
        <div id="zoom_area"></div>
</div>

CSS: 

#the_image {
    width: 640px;
    height: 427px;
}

#zoom_area {
    position: absolute;
    z-index:10;
    top:10px;
    width: 50px;
    height: 50px;
    background-color: #bbb;
    border: 1px dashed black;
    opacity: 0.6;
}

Хитрость заключается в том, чтобы установить абсолютную позицию и z-индекс 10.

См. Этот второй пример в действии: http://jsfiddle.net/pBRgb/

...