jquery перетащить изображение - PullRequest
Новая
       24

jquery перетащить изображение

9 голосов
/ 20 июня 2009

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

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

Ответы [ 5 ]

23 голосов
/ 20 июня 2009

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

<!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>
7 голосов
/ 20 июня 2009

Вам нужен инструмент jQuery Draggable UI. Код для этого, как и для всех jQuery, очень прост: 

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

Создает перетаскиваемый объект из стандартного HTML-тега (IMG в вашем случае). А чтобы ограничить его мобильность определенным регионом, вы должны воспользоваться опцией .

.

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

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

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

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

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

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 });
    }
}
1 голос
/ 09 июля 2012 
$('#dragMe').draggable({ containment: 'body' });

Этот код позволит перетаскивать div с идентификатором dragMe куда угодно в теле документа. Вы также можете написать класс или идентификатор в качестве содержания. 

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

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

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

0 голосов
/ 22 апреля 2015

Расширяя ответ от 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 });
        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...