Опубликовано admin - вт, 05/01/2018 - 23:02
draggable(options) → jQuery

jQuery UI Draggable плагин позволяет перетаскивать узлы структуры DOM с помощью мыши.
Перетаскиваемые элементы получают класс ui-draggable. На протяжении перетаскивания для элемента также устанавливается класс ui-draggable-dragging. Если вам необходимо не только перетаскивать, но и помещать элемент(drag-and-drop), используйте плагин jQuery UI Droppable, который обеспечивает помещение перетаскиваемого объекта.
Все функции обратного вызова (callback) (start, stop, drag) принимают два аргумента: Исходное событие браузера и преобразованный объект ui, о котором указано ниже в документации (если вы указали в качестве второго аргумента 'ui'):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


<div class="demo">

<div id="draggable" 
class="ui-widget-content">
	<p>Перетащи меня</p>
</div>

</div><!-- End demo -->

<div style="display: none;" 
class="demo-description">

<p>
Enable draggable functionality on any DOM element. 
Move the draggable object by clicking on it with the mouse
and dragging it anywhere within the viewport.
</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#draggable { width: 100px; height: 100px; padding: 0.5em; }

</style>

ui.helper
ui.position
ui.offset

Опция: addClasses


Опция: appendTo


Опция: axis


Опция: cancel


Опция: connectToSortable


Опция: containment


Опция: cursor


Опция: cursorAt


Опция: delay


Опция: distance


Опция: grid


Опция: handle


Опция: helper


Опция: iframeFix


Опция:


Опция: refreshPositions


Опция: revert


Опция: revertDuration


Опция: scope


Опция: scroll


Опция: scrollSensitivity


Опция: scrollSpeed


Опция: snap


Опция: snapMode


Опция: snapTolerance


Опция: stack


Опция: zIndex


Событие: start

Событие: drag

Событие: dragstop

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Используемая тема jQuery UI

jQuery UI Draggable плагин использует jQuery UI CSS структуру для придания стиля, включающиую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-draggable"></div> 
Учтите: Данный образец разметки сгенерирован через плагин draggable,это не разметка, которую вы можете использовать для создания перемещения. Для этого единственно необходима следующая разметка <div></div>.

На разработку сайта! Скидки до 20%!