Блог

Главная - Вопросы по программированию - jquery перетащите изображение и вычислите пространство для перетаскивания

jquery перетащите изображение и вычислите пространство для перетаскивания

#jquery #jquery-ui-draggable

#jquery #jquery-ui-перетаскиваемый

Вопрос:

Ребята, теперь я создал небольшой загрузчик изображений для загрузки изображения и просмотра изображения перед его загрузкой на сервер с помощью jQuery, и он хорошо работает со мной, это что-то вроде этого примера http://jqueryui.com/draggable /

но я хочу, чтобы пользователь перетаскивал изображение, чтобы выбрать ту часть, которую он хочет обрезать, это означает, что я хочу вычислить перетаскиваемое пространство слева и сверху, так каков наилучший способ в jQuery вычислить это пространство??

примечание: я использую этот метод 

 $("#upload-preview img").draggable();

Комментарии:

1. Итак, у вас есть задание, и вы не хотите напрягать себя, придумывая решение? Очевидно, что вы пока не прилагаете никаких усилий, чтобы сделать это самостоятельно. По крайней мере, с тем, что видно здесь до сих пор

2. ПРИВЕТ, Андреас, это не задание, и я действительно набрал свой код с нуля и все больше и больше пытался найти какой-либо метод в Jquery, чтобы заставить меня вычислить перетаскиваемое пространство, но ничего не нашел ….. в любом случае спасибо за вашу помощь

3. Я не могу понять, чего вы ожидаете от этого перетаскиваемого пространства. У вас есть старая позиция и новая. Вы выполняете вычитание. Это все, что нужно для этого?

4. Андреас, я не знаю, как использовать старое значение позиции и новое значение позиции с помощью Jquery ….. но знайте, что я нашел лучший способ сделать это… Спасибо

Ответ №1:

мы можем использовать offset.left и offset.top для получения значений позиций, таких как

 $('#dragThis').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: '   xPos);
            $('#posY').text('y: '   yPos);
        }
    });