библиотека jQuery перетаскивание изображения

Я хочу сделать перетаскиваемое изображение в jquery. прежде всего, мой опыт работы с jquery равен 0. сказав это, позвольте мне описать, чего я хочу достичь. у меня фиксированная ширина / высота div. и изображения, содержащиеся в div большого размера. поэтому я хочу, чтобы изображение было перетаскиваемым внутри этого div, чтобы пользователь мог видеть все изображение.

может кто-то помочь. pls немного подробно о процедуре, учитывая мою беглость jquery.

9
dom javascript jquery jquery-ui

5 ответов

вы можете использовать следующие;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    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() {
    $("#draggable").draggable();
});
</script>
</head>

<body>

<div class="container">

    <div id="screen">
        <img src="images/211.jpg" class="drag-image" id="draggable"/>
    </div>

</div>

</body>
</html>
23

вы хотите jQuery разрешить UI tool. Код для этого, как и для всех jQuery, очень прост:

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

создаст перетаскиваемый объект из стандартного тега html (IMG в вашем случае). И для ограничения его мобильности в определенном регионе вы бы заглянули в его вариант сдерживания.

обновление: "что такое" # draggable " и "ready"?

  1. '#draggable ' представляет элемент, который вы хотите иметь возможность перетаскивать. Символ hash (#) представляет идентификатор. Когда вы добавляете теги изображения, может дать ему идентификатор, как показано ниже:

    <img src="myimage.jpg" id="draggable" />

    Это сделает javascript выше сделать ваш образ перетаскиваемым, потому что он имеет идентификатор "#draggable", который ищет jQuery.
  2. '.ready()' - Это метод, который автоматически вызывается вашим браузером после завершения загрузки страницы. Разработчики поощряются группой jQuery разместить все код jQuery в этом методе, чтобы убедиться, что все элементы на странице полностью загружены до любых попыток кода jQuery манипулировать ими.
7

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

stop: function(event, ui) {
    var helper = ui.helper, pos = ui.position;
    var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
    if (pos.top >= 0) {
        helper.animate({ top: 0 });
    } else if (pos.top <= h) {
        helper.animate({ top: h });
    }
}
3
$('#dragMe').draggable({ containment: 'body' });

этот код сделает возможным перетаскивание div с идентификатором dragMe, где бы вы ни хотели, внутри тела документа. Вы также можете написать класс или ID, как сдерживание. 

$('#dragMe').draggable({ containment: '#container' });

этот код сделает div dragMe способным перетаскиваться внутри контейнера id.

надеюсь, что это поможет, иначе вы сможете найти свой ответ здесь http://jqueryui.com/demos/draggable/

1

расширение ответа из PH. Это обеспечит упругий отскок всякий раз, когда изображение перетаскивается в точку, в которой находится базовый контейнер:

stop: function(event, ui) {
        var helper = ui.helper, pos = ui.position;
        var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
        var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
        if (pos.top <= h) {
            helper.animate({ top: h });
        } else if (pos.top > 0) {
            helper.animate({ top: 0 });
        }
        if (pos.left <= w) {
            helper.animate({ left: w });
        } else if (pos.left > 0) {
            helper.animate({ left: 0 });
        }
    }
0