1997
Библиотека JAVASCRIPT SE@RCHER
Библиотека JAVASCRIPT SE@RCHER
Библиотека JAVASCRIPT SE@RCHER
Javascript + CSS
::
• блок
• текст
• линк
• меню
• фото
• окно
• кнопка
• фон
• видео
• таблица
ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года
HTML ↴
<!-- saved from url=(0037)http://www.site-do.ru/js/jquery10.php --> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Блок перетаскивается jQuery Плагин draggable JQUERY </title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script2.js"></script> </head> <body> <h1>jQuery Плагин draggable - перетаскиваем элементы</h1> <p><a href="88.zip" target="_blank">скачать архив</a></p> <p>Этот плагин позволяет перетаскивать элементы страницы с помощью мыши. Например, вот так:</p> <div class="resalt"> <center> <div id="les10_ex1" style="position: relative; left: -215px; top: -6px;" class="ui-draggable">Перетащи меня</div> </center> </div><br><br> Код html-страницы: <div class="kod"> <xmp> <head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <div id="les10_ex1">Перетащи меня</div> </div> Стиль div-у придайте сами, а вот на странице script.js необходимо указать, что этот div будет перемещаемым: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex1").draggable(); } </xmp> </div> Вот так все просто. Перемещение элемента можно настраивать, для это существует ряд параметров. Например: <ul> <li><i class="teg">axis</i> - ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат.<br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex2").draggable({ axis:'x' }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex2" style="position: relative; left: -101px;" class="ui-draggable">Перетащи меня</div> </center> </div> Теперь div можно перетаскивать только по горизонтали. </li><br><br> <li><i class="teg">containment</i> - ограничивает область перетаскивания. Возможные значения: parent (родительский элемент), document (текущий документ), window (окно), [x1, y1, x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области. <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex3").draggable({ containment:'parent' }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex3" style="position: relative; left: -100px; top: 0px;" class="ui-draggable">Перетащи меня</div> </center> </div> Теперь div можно перетаскивать только в пределах родительского элемента (в пределах рамки). </li><br><br> <li><i class="teg">cursor</i> - определяет вид курсора при перетаскивании. <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex4").draggable({ cursor: 'crosshair' }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex4" style="position: relative; left: -13px; top: -4px;" class="ui-draggable">Перетащи меня</div> </center> </div> Теперь при перетаскивании курсор принимает вид перекрестья в виде прицела. Другие возможные значения:<br> - e-resize - двунаправленная горизонтальная стрелка,<br> - n-resize - двунаправленная вертикальная стрелка,<br> - ne-resize - двунаправленная диагональная стрелка (из левого нижнего угла в верхний правый угол),<br> - nw-resize - двунаправленная диагональная стрелка (из правого нижнего угла в верхний левый угол),<br> - move - перекрестье из четырёх стрелок,<br> - text - обычный текстовый курсор,<br> - wait - песочные часы Windows. </li><br><br> <li><i class="teg">delay</i> - определяет время в миллисекундах, по истечении которого, начнется перетаскивание (полезно для предотвращения случайного перетаскивания). <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex5").draggable({ delay: 2000 }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex5" style="position: relative; left: -621px; top: 18309px;" class="ui-draggable ui-draggable-dragging">Перетащи меня</div> </center> </div> Теперь перетаскивание будет начинаться через 2 секунды после нажатия и удержания левой кнопки мыши. </li><br><br> <li><i class="teg">distance</i> - определяет расстояние в пикселах, которое указатель мыши должен пройти после того, как вы нажали на кнопку мыши, прежде чем начнется перетаскивание (так же, как и предыдущий параметр полезен для предотвращения случайного перетаскивания). <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex6").draggable({ distance: 50 }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex6" style="position: relative;" class="ui-draggable">Перетащи меня</div> </center> </div> Теперь перетаскивание будет начинаться только после того, как указатель мыши пройдет 50 пикселов, причем неважно в какую сторону. </li><br><br> <li><i class="teg">handle</i> - определяет, за какой элемент внутри данного осуществляется перетаскивание. <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex7").draggable({ handle: 'p' }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex7" style="position: relative;" class="ui-draggable"><p>Перетащи меня</p></div> </center> </div> Теперь перетаскивать div можно только, ухватив за абзац (за текст). </li><br><br> <li><i class="teg">revert</i> - определяет, будет ли элемент возвращен на свое место после перетаскивания (true - да). <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex8").draggable({ revert: true }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex8" style="position: relative;" class="ui-draggable"><p>Перетащи меня</p></div> </center> </div> Теперь после перетаскивания div будет возвращаться на свое место. </li><br><br> <li><i class="teg">revertDuration</i> - определяет, за какое время элемент будет возвращен на свое место после перетаскивания (если предыдущий параметр определен, как true). <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex9").draggable({ revert: true, revertDuration: 3000 }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex9" style="position: relative;" class="ui-draggable"><p>Перетащи меня</p></div> </center> </div> Теперь после перетаскивания div будет возвращаться на свое место за 3 секунды. </li><br><br> <li><i class="teg">zIndex </i> - определяет значение свойства z-index (номер слоя) перемещаемого элемента. <br><br> Пример: <div class="kod"> <xmp> $(document).ready(init); function init(){ $("#les10_ex10").draggable({ zIndex: 1 }); $("#les10_ex11").draggable({ zIndex: 2 }); $("#les10_ex12").draggable({ zIndex: 3 }); } </xmp> </div> <div class="resalt"> <center> <div id="les10_ex10" style="position: relative; z-index: auto; left: 111px; top: 47px;" class="ui-draggable">z-index: 1</div> <div id="les10_ex11" style="position: relative; z-index: auto; left: 122px; top: 14px;" class="ui-draggable">z-index: 2</div> <div id="les10_ex12" style="position: relative; z-index: auto; left: 126px; top: -26px;" class="ui-draggable">z-index: 3</div> </center> </div> Теперь в какой бы последовательности мы не перетаскивали наши div-ы, они всегда будут располагаться соответственно своим слоям (самый верхний 3, под ним 2, в самом низу 1). </li><br><br> </ul> А сейчас мы рассмотрим три параметра, связанных с событиями: <ul> <li><i class="teg">start</i> - событие наступает с началом перемещения.</li><br><br> <li><i class="teg">drag</i> - событие происходит в течение всего времени перемещения.</li><br><br> <li><i class="teg">stop</i> - событие наступает при завершении перемещения.</li><br><br> </ul> При использовании любого из этих параметров мы должны определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о положении перемещаемого объекта).<br><br> Используя свойства этих аргументов, можно узнать координаты объекта в любой момент при перемещении и после него. Например: <div class="resalt"> <div id="les10_ex13" style="position: relative;" class="ui-draggable"></div> <textarea cols="70" rows="3" wrap="off" id="res">
Html-код примера:
<head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <div id="les10_ex13"></div> <textarea cols="70" rows="3" wrap="off" id="res"></textarea> </div> Функция: <div class="kod"> <xmp> $(document).ready(init); function init(){ start: function(event, ui) { var a=event.type; $('#res').text('Событие: '+a); }, stop: function(event, ui) { var a=event.type; var c=ui.position.left; var d=ui.position.top; var e=ui.offset.left; var f=ui.offset.top; $('#res').text('Событие: '+a+ '\nРасстояние слева и сверху относительно родительского элемента: '+c+' '+d+ '\nАбсолютные значения расстояния слева и сверху: '+e+' '+f); } }
Всего у плагина draggable более 20 различных параметров, полный перечень можете посмотреть, например,
здесь
.
У плагина draggable есть четыре метода, которые позволяют менять работу плагина после его инициализации:
destroy
- удаляет всю функциональность плагина Draggable.
Пример:
$("#les").draggable(‘destroy’);
disable
- временно запрещает работу всей функциональности плагина Draggable.
Пример:
$("#les").draggable(‘disable’);
enable
- разрешает работу всей функциональности плагина Draggable (если она была запрещена).
Пример:
$("#les").draggable(‘enable’);
option
- позволяет установить значения параметров плагина после его инициализации.
Запись:
$("#les").draggable(‘option’, optionName, [value]);
Посмотрим на примере:
Html-код примера:
jQuery плагин draggable
