Jquery Draggable по x и по y

@bystrewsky · Регистрация: 25.09.2014

Студворк — интернет-сервис помощи студентам

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

@Vadim_Lasso · 20.10.2015, 18:22

Тут возможно то, что вам подходит http://jsbin.com/tokanagupe/edit?html,output

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
  $.fn.draggableXY = function(options) {
    var defaultOptions = {
      distance: 5,
      dynamic: false
    };
    options = $.extend(defaultOptions, options);
    
    this.draggable({
      distance: options.distance,
      start: function (event, ui) {
        ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0});
        ui.helper.data('draggableXY.newDrag', true);
      },
      drag: function (event, ui) {
        var originalPosition = ui.helper.data('draggableXY.originalPosition');
        var deltaX = Math.abs(originalPosition.left - ui.position.left);
        var deltaY = Math.abs(originalPosition.top - ui.position.top);
 
        var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
        ui.helper.data('draggableXY.newDrag', false);
 
        var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
        ui.helper.data('draggableXY.xMax', xMax);
 
        var newPosition = ui.position;
        if(xMax) {
          newPosition.top = originalPosition.top;
        }
        if(!xMax){
          newPosition.left = originalPosition.left;
        }
        
        return newPosition;
      }
    });
  };
</script>
<title>draggableXY</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 1em Helvetica, Arial; color: #fff; }
div { width: 8em; height: 8em; font-size: 0.8em; background-color: gray; padding: 0.1em; border: 0.1em solid white; }
</style>
</head>
<body>
  <div class="static">You can drag me in both axes!</div>
  <div class="dynamic">You can drag in both axes and you can change axes while you're dragging!</div>
  <script>
    $('div.static').draggableXY();
    $('div.dynamic').draggableXY({dynamic: true});
  </script>
</body>
</html>

@bystrewsky · 20.10.2015, 18:50 **[ТС]**

Спасибо большое, то что надо)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@bystrewsky 0 / 0 / 0 Регистрация: 25.09.2014 Сообщений: 20

	Jquery Draggable по x и по y 20.10.2015, 15:37. Показов 1150. Ответов 2 Метки нет (Все метки) Всем доброго времени суток! Подскажите пожалуйста, как правильно сделать, чтобы элемент можно было перетаскивать по обеим осям, но только по ним и никак больше, тоесть по диагонали чтобы не перетаскивался. 0

@bystrewsky 0 / 0 / 0 Регистрация: 25.09.2014 Сообщений: 20
	20.10.2015, 18:50 [ТС]
	Спасибо большое, то что надо) 0

Jquery Draggable по x и по y

Решение