Методы работы с техникой "перетащи и брось" складывались в течение многих лет. Неудивительно, что с увеличением числа программистов, разрабатывающих плагины с открытым исходным кодом (например, для jQuery) вновь возрождаются старые методы. Библиотека для JavaScript весьма адаптивна и предлагает множество улучшений в нашу эпоху веб технологий.
В данном уроке мы сделаем скрипт, который можно будет использовать для создания динамических прямоугольников с техникой "перетащи и брось" на своем веб сайте. Процесс управляется jQuery. Такие скрипты сохраняют время, предоставляя готовый функционал! А библиотеку "перетащи и брось" можно будет использовать в других проектах.
Первым делом подготовим небольшой сайт для проекта. В папке проекта нужно создать два каталога с примечательными именами"js" и "css" и пустой файл index.html . Код будет очень простой, чтобы сложилось четкое представление о работе, и появилась точка для дальнейшего развития.
Ниже приводится код нашего HTML файла. В разделе head мы включаем 3 скрипта. Основной скрипт jQuery будет подгружаться с сервера Google Code . также подключается наш файл стилей style.css , который содержит основные свойства для формирования внешнего вида нашего документа.
Перетащи меня
Да-да. Именно меня.
Меня тоже можно перетащить
{ zIndex: 200, opacity: .9 }
P.S.: меня можно бросить где угодно!
Внутри раздела body помещены только два блока div , которые содержат оба прямоугольника. Код достаточно простой и понятный. Внутри каждого прямоугольника размещены заголовки с классами handler и handler2 . Это важно, так как при перетаскивании каждый прямоугольник ведет себя по-своему.
Код HTML очень прост. Если вам понятна основная разметка, то и стили CSS также не будут представлять сложности. В основном определяются поля, отступы и цвета.
Body,html { font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; } p { height:30px; }
Селекторы body,html используются только для демонстрационной страницы. А весь контент размещается в двух перетаскиваемых прямоугольниках.
Dv1 { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; } .dv1 h2 { background-color:#b2d3f5; padding:5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; } .dv1 div { padding:5px; margin-bottom:10px; } .dv2 { background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; } .dv2 h2 { background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; } .dv2 .content2 { padding:5px; margin-bottom:10px; }
Для обоих классов.dv1 и.dv2 мы используем абсолютное позиционирование. В этом нет необходимости и, вероятно, это не самый лучший способ для позиционирования перетаскиваемых прямоугольников. Однако для нашего примера такое позиционирование имеет смысл, так как при каждом обновлении страницы прямоугольники устанавливаются в определенные места.
Также шрифты и цвета различаются для прямоугольников, чтобы легче было увидеть разницу.
В остальном заголовки и содержание блоков почти идентично. Если вы будете копировать стили в свой проект, поменяйте имена перед запуском. В некоторых случаях логичнее будет использовать ID вместо классов, например при использовании техники "перетащи и брось" для одного определенного блока.
Разбираем JavaScriptДва файла JavaScript содержат весь необходимый для работы код. Опустим детали работы с jQuery, так как это выходит за рамки урока. Обратим внимание на файл jquery.dragndrop.js .
На строке 22 происходит определение функции Drags .
$.fn.Drags = function(opts) { var ps = $.extend({ zIndex: 20, opacity: .7, handler: null, onMove: function() { }, onDrop: function() { } }, opts);
Здесь устанавливается возвращаемая переменная и данные инициализации для Drags . Такой способ очень широко используется при работе с jQuery для передачи опций другим функциям. Внутри мы устанавливаем переменные для всех доступных опций для перетаскиваемых прямоугольников.
Следующая часть кода включает обработчики событий для переменной dragndrop . Оба события drag и drop вызывают функции с передачей параметров события в них. Данные события происходят, когда вы нажимаете кнопку мыши, чтобы перетащить объект, а затем отпускаете ее.
Var dragndrop = { drag: function(e) { var dragData = e.data.dragData; dragData.target.css({ left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop }); dragData.handler.css({ cursor: "move" }); dragData.target.css ({ cursor: "move" }); dragData.onMove(e); }, drop: function(e) { var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css({ "opacity": "" }); dragData.handler.css("cursor", dragData.oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); } }
Наши функции манипулируют CSS позиционированием каждого объекта. Если изменить абсолютное позиционирование ваших объектов, то это не повлияет на работу кода, так как каждая функция JavaScript изменяет любой стиль, который определен для объекта.
В остальном коде происходит проверка обработчика и косметические изменения других стилей. Здесь можно добавить изменение прозрачности, шрифта и его цвета, или добавить новые параграфы.
Функции Drag/DropВо втором файле fn.js содержится совсем простой код. Мы дожидаемся полной загрузки документа, после чего вызываем наши функции. Определяются два экземпляра функции Drags , которая разбиралась ранее.
У нас есть два перемещаемых блока с классами.dv1 и.dv2 . Если нужно оставить один перемещаемый блок, то нужно просто удалить вторую часть кода. Добавление еще одного перемещаемого блока также осуществляется просто. Нужно только добавить новую функцию в данном файле.
Первым делом нужно установить опции при вызове функции. Обязательно надо установить имя обработчика. C его помощью мы сообщаем jQuery, какой обработчик использовать при нажатии кнопки мыши в определенной области документа. В качестве имени обработчика может быть класс или атрибут ID.
В нашей первой функции есть два обработчика событий onMove и onDrop . Оба вызывают новые функции, передаваемые в текущее событие как переменные. Здесь выполняется манипулирование кодом HTML в прямоугольнике для обновления при каждом движении. Это замечательный эффект для демонстрации того, как можно осуществлять управление процессом с помощью простых событий jQuery.
Во второй функции мы используем параметры z-Index и opacity . Можно добавить и другие свойства CSS? но для этого потребуется переработать код JavaScript, чтобы осуществлялась проверка установок. Например, можно передавать другой стиль шрифта или значения для высоты и ширины для перемещаемого прямоугольника - получится очень интересный трюк!
ЗаключениеВ результате небольшой работы мы получили в свое распоряжение замечательный интерфейс с функцией "перетащи и брось". jQuery предоставляет огромные преимущества для разработчиков, которые жаждут использовать в своих проектах старые методы.
В результате мы получили не только функции обработчики событий, но и можем передавать новые переменные в перетаскиваемые блоки. Это открывает новые возможности для творчества. Демонстрация к уроку содержит лишь набросок того, что можно делать с помощь такого кода.
Так что изучайте документацию jQuery для использования библиотечных функций.
Предоставить возможность пользователю загружать файлы на сервер перетаскивая их например, с рабочего стола. Причем чтобы была возможность перетащить сразу несколько файлов.
РешениеКак видно из примера выше, файлы отправляются на сервер сразу же после выбора. Отправим их по событию:
Window.onload = function(){ var uploader = new qq.FileUploader({ autoUpload: false, element: document.getElementById("file-uploader"), action: "php/upload.php" }); $("#startUpload").on("click", function(){ uploader.uploadStoredFiles(); }); };
РезультатВ целом у плагина много опций и настроек, имеются колбеки. Все это описано . Fineuploader находится в постоянной разработке, поэтому рекомендую при привязке посещать репозиторий и брать свежую версию.
СтилизацияПлагин создает свою структуру на базе класса.qq-uploader, все элементы описаны в css файле fileuploader.css
На заметкуЕсли ослы упорно отказываются работать, открываем скрипт, ищем там строку:
Var form = qq.toElement("");
и меняем на:
Var form = qq.toElement("");
HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.
For web sites, extensions, and XUL applications, you can customize which elements can become draggable , the type of feedback the draggable elements produce, and the droppable elements.
This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.
Drag Events| drag | ondrag | …a dragged item (element or text selection) is dragged. |
| dragend | ondragend | …a drag operation ends (such as releasing a mouse button or hitting the Esc key; see Finishing a Drag .) |
| dragenter | ondragenter | …a dragged item enters a valid drop target. (See Specifying Drop Targets .) |
| dragexit | ondragexit | …an element is no longer the drag operation"s immediate selection target. |
| dragleave | ondragleave | …a dragged item leaves a valid drop target. |
| dragover | ondragover | …a dragged item is being dragged over a valid drop target, every few hundred milliseconds. |
| dragstart | ondragstart | …the user starts dragging an item. (See Starting a Drag Operation .) |
| drop | ondrop | …an item is dropped on a valid drop target. (See Performing a Drop .) |
Note: Neither dragstart nor dragend events are fired when dragging a file into the browser from the OS.
Interfaces The basicsThis section is a summary of the basic steps to add drag-and-drop functionality to an application.
Identify what is draggableMaking an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample:
function dragstart_handler(ev) { // Add the target element"s id to the data transfer object ev.dataTransfer.setData("text/plain", ev.target.id); }
This element is draggable.
For more information, see:
Define the drag"s dataThe application is free to include any number of data items in a drag operation. Each data item is a string of a particular type - typically a MIME type such as text/html .
Each drag event has a dataTransfer property that holds the event"s data. This property (which is a DataTransfer object) also has methods to manage drag data. The setData() method is used to add an item to the drag data, as shown in the following example.
Function dragstart_handler(ev) { // Add different types of drag data ev.dataTransfer.setData("text/plain", ev.target.innerText); ev.dataTransfer.setData("text/html", ev.target.outerHTML); ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href); }
By default, the browser supplies an image that appears beside the pointer during a drag operation. However, an application may define a custom image with the setDragImage() method, as shown in the following example.
Function dragstart_handler(ev) { // Create an image and then use it for the drag image. // NOTE: change "example.gif" to a real image URL or the image // will not be created and the default drag image will be used. let img = new Image(); img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); }
Learn more about drag feedback images in:
Define the drag effectThe dropEffect property is used to control the feedback the user is given during a drag-and-drop operation. It typically affects which cursor the browser displays while dragging. For example, when the user hovers over a drop target, the browser"s cursor may indicate the type of operation that will occur.
Three effects may be defined:
During the drag operation, drag effects may be modified to indicate that certain effects are allowed at certain locations.
The following example shows how to use this property.
Function dragstart_handler(ev) { ev.dataTransfer.dropEffect = "copy"; }
For more details, see:
Define a drop zoneBy default, the browser prevents anything from happening when dropping something onto most HTML elements. To change that behavior so that an element becomes a drop zone or is droppable , the element must have both ondragover and ondrop event handler attributes.
The following example shows how to use those attributes, and includes basic event handlers for each attribute.
Задумывался ли ты, какой десктоп используют прожженные линуксоиды, которые большую часть времени сидят в терминале, а о таких вещах, как иконки на рабочем столе и drag’n’drop, либо уже забыли, либо никогда не узнавали? Те самые странные люди, которые на каждый чих пишут shell-скрипт и с отвращением смотрят на KDE и GNOME. Что ж, сегодня мы покажем, как настроить настоящий гиковский десктоп с тайлами, строками состояния и терминалами.
Начнем с выбора дистрибутива. Ubuntu, Mint, Debian и Fedora не годятся на роль дистрибутива для истинного гика. В них нет ничего плохого, но если ты обратишь внимание, что же юзают любители ковырять систему, то, скорее всего, увидишь Arch Linux, Gentoo или Slackware. Это простые как сапог дистрибутивы, позволяющие тонко контролировать систему.
Остановимся на Arch Linux, наиболее популярном сегодня дистрибутиве для гиков. Свежеустановленный Arch Linux представляет собой простенький консольный дистрибутив, который ничего не умеет. Наиболее консервативным товарищам, освоившим UNIX еще в восьмидесятых, хватит и этого, но все-таки нужен хоть какой-то графический интерфейс и графический браузер (да, есть и текстовые, например Lynx, w3m, Links, ELinks).
В UNIX-подобных системах (к которым, конечно же, относится и Linux) за формирование графического интерфейса в первую очередь отвечает так называемый менеджер окон (Window Manager, WM). Это особое приложение, основная задача которого - управлять окнами, создавать для них рамки с кнопками, корректно обрабатывать ситуации наложения окон друг на друга, а в отдельных случаях создавать панельки и менюшки для запуска приложений и управления ими; хотя эта задача обычно ложится на плечи других приложений, которые вместе с менеджером окон формируют полноценный рабочий стол (Desktop Environment, DE), такой как GNOME, KDE или Xfce.
Нам никакой DE не нужен, это изобретение шайтанов, пришедших в мир UNIX из Windows. Более того, нам не нужен классический менеджер окон, ибо двигать окна мышкой и накладывать их друг на друга контрпродуктивно. Вместо этого мы установим так называемый тайловый менеджер окон, который не разрешает таскать окна по экрану, а вместо этого либо всегда открывает все окна на полный экран, либо делит экран между окнами пропорционально (или непропорционально), не позволяя им накладываться друг на друга.
Наверное, лучший тайловый менеджер окон из доступных на сегодняшний день - это i3. Установим его:
$ sudo pacman -S i3-wm
Не отходя от кассы, сразу поставим i3status (он будет выводить статусную строку с различной полезной информацией и треем в нижней части экрана), а также крохотное приложение dmenu, позволяющее быстро запускать приложения, и, конечно же, эмулятор терминала:
$ sudo pacman -S i3status dmenu xterm
Если это действительно чистая установка Arch Linux, то также понадобится сервер Xorg, драйвер видеокарты и драйвер тачпада (если это ноутбук):
$ sudo pacman -S xorg-server xf86-video-intel xf86-input-synaptics
Пакет xf86-video-intel меняем на нужный в зависимости от производителя видеочипа:
Нам понадобится также менеджер логина - то самое графическое окно с полями для ввода имени пользователя и пароля, которое ты видишь при загрузке системы. Никто не запрещает использовать менеджер логина KDE, GNOME, Xfce или любой другой графической среды, но это весьма тяжеловесные приложения, которые тащат за собой массу совершенно не нужных зависимостей. Поэтому мы остановимся на простом и быстром менеджере логина SLiM:
$ sudo pacman -S slim
Сперва подправим его конфиг /etc/slim.conf , добавив в него такую строчку:
Current_theme archlinux
Сразу после успешного логина SLiM будет исполнять содержимое файла ~/.xsession , который по задумке должен делать некоторую первоначальную настройку пользовательского окружения и запускать менеджер окон. Не будем изменять традициям и добавим в файл следующие строки:
# Укажем предпочтительный язык для интерфейса системы и приложений # Удали эти строки, если предпочитаешь английский язык export LANG=ru_RU.utf8 export LC_ALL=ru_RU.utf8 # Настроим переключатель раскладки между русским и английским по клавише Caps Lock setxkbmap "us,ru" ",winkeys" "grp:caps_toggle,grp_led:caps" # Отключим раздражающий бибикающий звук xset b off # Запустим i3 exec i3
Это все, теперь можно запустить графический интерфейс:
$ sudo systemctl start slim
На экране должно появиться окно логина SLiM.
i3 и dmenu
Итак, перед тобой i3. Точнее, ты должен увидеть только черный экран со строкой состояния снизу (в ней отображается текущая заполненность диска, подключенные сетевые интерфейсы, уровень батареи, дата и время). Никаких меню, кнопок «Пуск» и прочего булшита.
i3 полностью управляется с клавиатуры. Win + Enter запускает терминал (сейчас это убогий xterm, но мы его заменим). По умолчанию окна занимают всю площадь экрана, деля его на две, три, четыре и более части по вертикали. Такое поведение можно отключить, нажав Win + w, тогда каждое окно будет открыто на полный экран - это практически идеальный вариант для ноутбуков с диагональю экрана 10–13".
Переключение между окнами - Win + стрелки; Win + 1...0 - переключение между рабочими столами, которые здесь называются воркспейсами (Workspace). Чтобы закрыть окно, нажимаем Win + Shift + Q. На данном этапе этих комбинаций будет вполне достаточно.
Win + d - особая комбинация. Она открывает dmenu - строку ввода вверху экрана, позволяющую быстро запускать нужные приложения. По своей сути dmenu сильно напоминает универсальную строку поиска типа Spotlight в macOS: ты просто начинаешь вбивать имя приложения, и он подсказывает тебе варианты. Автодополнение также работает. В i3 dmenu можно назвать аналогом меню приложений в классических рабочих столах.
i3 поддерживает массу вариантов деления экрана на рабочие области, так, чтобы в них можно было расположить различные приложения. Доступен и режим классических плавающих окон. Перевести текущее приложение в этот режим можно с помощью комбинации Win + Shift + пробел. Перетаскивать окно можно мышкой, зажав клавишу Win, изменять размер - правой кнопкой мыши, опять же с зажатой кнопкой Win.
Шрифты, терминал и scratchpadПо умолчанию i3 использует довольно унылый стандартный шрифт Xorg, а в качестве эмулятора терминала мы установили дурной xterm, который давно желают закопать не только пользователи, но и сами разработчики (я не шучу). Это необходимо исправить.
Начнем со шрифта. О выборе консольного моноширинного шрифта (а именно такой нам нужен, в том числе и для i3) много спорят, но я предлагаю остановиться на Terminus. Это четкий шрифт без засечек с минимумом округлых форм, он очень хорошо читается и отлично подходит для не Retina-дисплеев (да и для Retina тоже). Устанавливаем:
$ sudo pacman -S terminus-font
С эмулятором терминала тоже не все однозначно. Эталоном уже на протяжении многих лет считается urxvt (rxvt-unicode). Он легкий, быстрый и хорошо настраиваемый. Но так как в рамках этой статьи мы не можем вдаваться в детали глубокой настройки каждого компонента (а без такой настройки urxvt ужасен), то остановимся на LilyTerm. Он быстрый, имеет минимум зависимостей и все преимущества urxvt, а настроить его можно с помощью контекстного меню:
$ sudo pacman -S lilyterm
Теперь необходимо внести изменения в файл настроек i3, чтобы он подхватил наш шрифт и использовал LilyTerm вместо стандартного терминала. Открываем файл ~/.config/i3/config , находим опцию font и меняем ее значение:
Font pango:xos4 Terminus 8
Чтобы запускать LilyTerm по Win + Enter, добавляем такую опцию:
Bindsym $mod+Return exec lilyterm
Ну и опция для запуска dmenu с нашим шрифтом:
Bindsym $mod+d exec dmenu_run -fn "xos4 Terminus-8"
Плюс парочка строк для включения так называемого scratchpad:
Bindsym $mod+Shift+minus move scratchpad bindsym $mod+minus scratchpad show
Scratchpad в терминологии i3 - это доступное по хоткею небольшое окно посередине экрана. Он хорошо подходит для приложений, которые нужны часто, но отвлекают, постоянно находясь на экране (да, для мессенджеров). Win + минус показывает scratchpad, повторное нажатие скрывает его. Win + Shift + минус отправляет текущее окно в scratchpad.
Когда все изменения будут сделаны, сохраняем файл и нажимаем Win + Shift + R, чтобы перезапустить i3.
Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score!
Где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь » или сенсорного экрана .
Способ реализуется путём «захвата» (нажатием и удержанием главной (первой , чаще левой) кнопки мыши) отображаемого на экране компьютера объекта, программно доступного для подобной операции, и перемещении его в другое место (для изменения расположения) либо «бросания» его на другой элемент (для вызова соответствующего, предусмотренного программой, действия). По отношению к окнам (также способным к перемещению подобным способом) данный термин обычно не употребляется.
Базовыми действиями и самыми простыми примерами drag-and-drop действий являются: перемещение объекта, перемещение объекта в из панели в панель, хотя в современных операционных системах drag-and-drop получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя.
Объектами для перемещения могут быть следующие элементы интерфейса : значки (иконки) Рабочего стола , плавающие панели инструментов , ярлыки программ в Панели задач (начиная с Win XP), элементы TreeView , текстовая строка, ячейка DataGridView., также элементы OLE . Перемещаться объекты могут как в пределах некоторой определённой области, в пределах одного окна , между панелями одного окна, так и между разными окнами.
Событие перетаскивания должно инициироваться каким-либо действием пользователя. Чаще всего этим действием является нажатие левой кнопки мыши на элементе (событие это называется MouseDown), который может быть перемещен в своем контейнере. Некоторые компоненты обладают собственными событиями начала drag-n-drop - например, TreeView имеет событие ItemDrag.
Wikimedia Foundation . 2010 .
Смотреть что такое "Drag-and-drop" в других словарях:Drag and drop - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [<engl. drag „ziehen“ + and „und“ + drop „fallen… … Universal-Lexikon
Форма выполнения каких либо действий в графических интерфейсах пользователя, подразумевающая использование компьютерной мыши. В переводе с английского означает буквально: тащи и бросай. Действие выполняется путем оперирования видимыми на экране… … Словарь бизнес-терминов
drag and drop - (computing) To move an icon, file, etc across the screen using a mouse and release it in a different place (dragˈ and dropˈ adjective) Main Entry: drag … Useful english dictionary
drag and drop - IT to move something from one area of a computer screen to another using the mouse: »The software allows you to drag and drop elements for the page images, text, etc. anywhere you want. Main Entry: drag … Financial and business terms
drag-and-drop
- UK US verb n.; Gen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird }
