Drag and drop что это: Drag and drop — Руководства Web-разработчика

Page not found

Меню

• iOS
• OS X
• Apple TV
• Watch OS
• App Store Review

• Дополнить перевод
• Связаться с нами

Руководство для разработчиков iOS

• iOS
• OS X
• Apple TV
• Watch OS
• App Store Review
• Дополнить перевод
• Связаться с нами

Drag and drop — Руководства Web-разработчика

Firefox и прочие приложения компании Mozilla имеют ряд возможностей для управления drag и drop. Это позволяет пользователю нажать и удерживая зажатой кнопку мыши над элементом, переместить его на другую позицию, отпустив кнопку мыши пользователь может оставить элемент на новой позиции. На протяжении всей операции перемещения полупрозрачное представление элемента следует за курсором мыши. Новая позиция элемента может располагаться в совершенно другом приложении. Веб сайты, и XUL приложения могут использовать эту функциональность для того, чтобы определить какие элементы страницы могут быть перемещены, а также определить элементы куда первые могут быть перемещены.

Эта часть покрывает функциональность drag и drop в Firefox 3.5 (Gecko 1.9.1) а также последующие версии. Для старого API для Firefox 3.0 и ранее, в котором нет соответствующей поддержки данной функциональности, смотрите older API documentation.

Использование функциональности drag и drop подразумевает выполнения следующих шагов:

• Определить переносимый элемент. Присвоить true атрибуту draggable элемента, который мы хотим перенести. Для детальной информации смотрите The Draggable Attribute.
• Определить данные, которые могут быть перемещены, они могут быть разного формата. К примеру, текстовые данные, содержащие строку текста который может быть перемещен. Для детальной информации смотрите Drag Data.
• (Необязательно) Определить изображение которое будет рядом с указателем мыши на протяжении всей операции перетаскивания.  Если пользовательское изображение не будет определено, будет сгенерирована картинка по умолчанию, в зависимости от элемента, на котором была зажата кнопка мыши (что будет означать, что элемент переносят). Ознакомиться детально с установкой изображения перетаскивания можно по ссылке Setting the Drag Feedback Image.
• Определить возможные эффекты переноса. Возможны три таких эффекта: copy показывает, что перемещаемые данные копируются из прежнего места расположения в новое, move показывает, что перемещаемые данные полностью переносятся на новое место, и link показывает, что создается некая форма взаимодействия или связи между исходной точкой и точкой назначения. На протяжении операции перемещения, картинка которая следует за курсором мыши может меняться в зависимости от того, может ли элемент быть перемещен в область под курсором. Если перенос разрешен, перемещение может быть произведено. Смотрите Drag Effects для детальной информации.
• Определить область назначения. По умолчанию браузер не позволяет перемещать что-либо на HTML элемент. Однако, чтобы сделать элемент активным для перемещения других элементов на него, просто отмените действие по умолчанию. То есть, подпишитесь на события «ondragenter» или «ondragover». Для детальной информации смотрите Specifying Drop Targets.
• Обработать завершение переноса. Вы можете получить данные из переносимого элемента и произвести над ними необходимые операции. Для детальной информации, пожалуйста, смотрите Performing a Drop.

Mozilla и Firefox поддерживают ряд возможностей, которые выходят за рамку стандартной модели спецификации. Они позволяют пользователю перемещать несколько элементов и перемещать нестроковые данные. Для детальной информации смотрите Dragging and Dropping Multiple Items.

Для того, чтобы ознакомиться с общим списком данных поддерживаемых операцией drag and drop смотрите Recommended Drag Types.

Также доступны примеры с лучшей практикой использования операции drag and drop для перемещения данных разных типов:

Смотри DataTransfer для ссылки на объект DataTransfer.

Ряд событий срабатывают на протяжении всей процедуры drag and drop. Запомните, что только drag-события срабатывают на протяжении операции перемещения; события мыши, такие как mousemove — нет. Также запомните, что события dragstart и dragend не срабатывают при попытке перенести файл из операционной системы в браузер.

Свойство dataTransfer всех событий перемещения содержит данные про все drag и drop операции.

dragstart

Срабатывает когда элeмент начал перемещаться. В момент срабатывания события dragstart пользователь начинает перетаскивание элемента. Обработчик данного события может быть использован для сохранения информации о перемещаемом объекте, а также для изменения изображения, которое будет ассоциировано с перемещением. Дaнное событие не срабатывает, когда некоторый файл будет переноситься из операционной системы в браузер. Для детальной информации Starting a Drag Operation.

dragenter

Срабатывает, когда перемещаемый элемент попадает на элемент-назначение. Обработчик этого события показывает, что элемент находится над объектом на который он может быть перенесен. Если же обработчика нет, либо он не совершает никаких действий перемещение по умолчанию запрещено. Это событие также используется для того, чтобы подсветить либо промаркировать объект над которым происходит перемещения в случае, если перемещение на данный элемент разрешено. Для детальной информации смотрите Specifying Drop Targets.

dragover

Данное событие срабатывает каждые несколько сотен милисекунд, когда перемещаемый элемент оказывается над зоной, принимающей перетаскиваемые элементы. Для детальной информации смотрите Specifying Drop Targets.

dragleave

Это событие запускается в момент перетаскивания, когда курсор мыши выходит за пределы элемента. Обработчикам следует убрать любую подсветку или иные индикаторы, указывавшие на присутствие курсора, чтобы тем самым обозначить реакцию на прекращение перетаскивания.

drag

Запускается при перемещении элемента или выделенного текста.

drop

Событие drop вызывается для элемента, над которым произошло «сбрасывание» перемещаемого элемента. Событие отвечает за извлечение «сброшенных» данных и их вставку. Событие будет срабатывать только при завершении операции перетаскивания, например, событие не сработает, если пользователь отменит перетаскивание нажатием Esc, или не донесет элемент, до цели. Для детальной информации смотрите Performing a Drop.

dragend

Источник перетаскивания получит событие dragend, когда перетаскивание завершится, было оно удачным или нет. Это событие не вызывается при перетаскивании файла в браузер из ОС.   Для детальной информации смотрите Finishing a Drag.

Drag and Drop в дизайне сайтов и приложений

Drag and Drop используется практически во всех интерфейсах — сортировка писем в почте, перемещения карточек Trello или перетаскивание вкладок в Chrome. 

Drag and Drop взаимодействие часто пропускается или остается незамеченным. Иногда они случаются так естественно, что вы даже этого не понимаете. Но если вы внимательно посмотрите и сравните эти три примера, каждый из них демонстрирует очень разные стандарты UX в области перетаскивания.

Нет ничего плохого в том, что эти интерфейсы имеют разные стандарты UX.  Например, возможно, Трелло решил наклонить карточки, во время перетаскивания, потому что это поведение соответствует их языку дизайна. Но там, где проблема заключается в том, что нет четких стандартов UX для перетаскивания в общий интерфейс. Вы можете столкнуться с примерами, когда перетаскивание чего-то в одной части интерфейса является совершенно другим опытом.

Чтобы проиллюстрировать это, давайте посмотрим на доступную библиотеку drag and drop Salesforce. Он демонстрирует пять моделей для перетаскивания, каждая из которых представляет собой совершенно другой.

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

Значок три строки указывает на перетаскиваемый элемент? Или это значок с тремя точками? Какой из курсоров показывает, что можно перетащить элемент? Лучше не использовать разные элементы обозначающие одно действие в одном проекте.

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

Примеры использования drag and drop  в дизайне

Чаще всего drag and drop применяется в древовидных списках, таблицах и карачках.

Случаи использования:

1. Изменения порядка в списке элементов;
2. Переупорядочение столбцов в таблице;
3. Переупорядочение строк в таблице;
4. Реорганизация и слияние карточек;

Для пользовательских интерфейсов с большим объемом данных, перетаскивание имеет решающее значение для того, чтобы пользователи могли организовать сложные и большие объемы данных.

Создание библиотеки доступности

Если вы работаете в команде, вам необходимо начать с создания библиотеки доступности, это может помочь вам начать думать о том, как обращаться с шаблонами перетаскивания для вашей дизайн-системы.

 

1. Выбор цвета

Для обозначения drag and drop взаимодействия избегайте цветов, которые уже имеют значение в вашем интерфейсе. Так вы сможете использовать пользовательский опыт, и, когда пользователи будут сталкиваться с выбранным цветом, они смогут ожидать именно этого взаимодействия.

2. Стили состояний

Установите стили для разных состояний перетаскиваемого элемента. Укажите, какое именно визуальное воздействие получит элемент во время его перетаскивания, после его перетаскивания и т. д.

Например, когда элемент перетаскивается, он будет иметь следующие стили:

Добавление тонкой тени для тени создает впечатление, что элемент фактически снимается со страницы.

Светлое, прежнее положение элемента во время перетаскивания. Это действует как небольшое напоминание пользователям, где элемент был ранее.

3. Системные курсоры

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

Для Mac мы используем перчатку. Курсор захвата отображается при наведении, когда элемент перетаскивается. Для областей, где элемент нельзя перетащить, мы использовали курсор указывающий на недоступность.

Для Windows мы используем курсор перемещения (крестообразные стрелки). Опять же, для областей, где элемент нельзя перетащить, мы использовали курсор указывающий на недоступность.

4. Перетаскивыемае цели

Установите шаблоны для целевых объектов, которые являются допустимыми областями, где можно перетаскивать элементы. Подобно стилям состояний выше, явно выделяйте какие цели доступны.

Будет полезно казать место перемещения, например добавив круг в конец позиции, чтобы было проще отличить позицию от обычной линии или границы.

 

Резюме

Эти стандарты помогут создать базовую основу для подключения Drag and Drop элементов в интерфейсе, но есть много других способов стандартизации перетаскивания компонентов.

 

Источник

Перетаскивание (drag & drop) в PyQt5

В этой части руководства по PyQt5, мы поговорим об операциях drag & drop. В графических интерфейсах, drag & drop – это действие клика на виртуальный объект и перетаскивания его в другое положение или в другой виртуальный объект.

Drag & drop – это часть графического пользовательского интерфейса. Операции перетаскивания позволяют пользователям делать сложные вещи интуитивно.

Обычно, мы можем перетаскивать две вещи: данные или некие графические объекты. Если мы перетаскиваем изображение из одного приложения в другое, мы перетаскиваем двоичные данные. Если мы перетаскиваем таблицу в Firefox и перемещаем её в другое место, мы перетаскиваем графический компонент.

Простое перетаскивание

В первом примере, у нас есть QLineEdit и QPushButton. Мы перетаскиваем текст из виджета строки редактирования и помещаем его в виджет кнопки. Метка кнопки изменится.

#!/usr/bin/python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import (QPushButton, QWidget,
    QLineEdit, QApplication)

class Button(QPushButton):

    def __init__(self, title, parent):
        super().__init__(title, parent)

        self.setAcceptDrops(True)


    def dragEnterEvent(self, e):

        if e.mimeData(). hasFormat('text/plain'):
            e.accept()
        else:
            e.ignore()

    def dropEvent(self, e):

        self.setText(e.mimeData().text())


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()


    def initUI(self):

        edit = QLineEdit('', self)
        edit.setDragEnabled(True)
        edit.move(30, 65)

        button = Button("Button", self)
        button.move(190, 65)

        self.setWindowTitle('Simple drag & drop')
        self.setGeometry(300, 300, 300, 150)


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    app.exec_()

Пример представляет простую операцию перетаскивания.

class Button(QPushButton):

    def __init__(self, title, parent):
        super().__init__(title, parent)

        self.setAcceptDrops(True)

Для того, чтобы перетащить текст на виджет QPushButton, мы должны переопределить несколько методов. По этой причине, мы создаём собственный класс Button, который наследует класс QPushButton.

self.setAcceptDrops(True)

Мы разрешаем события перетаскивания для виджета.

def dragEnterEvent(self, e):

    if e.mimeData().hasFormat('text/plain'):
        e.accept()
    else:
        e.ignore()

Сначала мы переопределяем метод dragEnterEvent(). Мы сообщаем о типе данных, который мы допускаем. В нашем случае, это обычный текст.

def dropEvent(self, e):

    self.setText(e.mimeData().text())

Путём переопределения метода dropEvent, мы определяем, что мы должны делать после события перетаскивания. Здесь мы меняем текст виджета кнопки.

edit = QLineEdit('', self)
edit.setDragEnabled(True)

Виджет QLineEdit имеет встроенную поддержку операций перетаскивания. Все, что необходимо сделать – это вызвать метод setDragEnabled(), чтобы активировать её.

Перетаскивание виджета кнопки

В следующем примере, мы продемонстрируем, как перетаскивать виджет кнопки.

#!/usr/bin/python3
# -*- coding: utf-8 -*-

import sys
from PyQt5. QtWidgets import QPushButton, QWidget, QApplication
from PyQt5.QtCore import Qt, QMimeData
from PyQt5.QtGui import QDrag


class Button(QPushButton):

    def __init__(self, title, parent):
        super().__init__(title, parent)


    def mouseMoveEvent(self, e):

        if e.buttons() != Qt.RightButton:
            return

        mimeData = QMimeData()

        drag = QDrag(self)
        drag.setMimeData(mimeData)
        drag.setHotSpot(e.pos() - self.rect().topLeft())

        dropAction = drag.exec_(Qt.MoveAction)


    def mousePressEvent(self, e):

        QPushButton.mousePressEvent(self, e)

        if e.button() == Qt.LeftButton:
            print('press')


class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()


    def initUI(self):

        self.setAcceptDrops(True)

        self.button = Button('Button', self)
        self.button.move(100, 65)

        self.setWindowTitle('Click or Move')
        self.setGeometry(300, 300, 280, 150)


    def dragEnterEvent(self, e):

        e. accept()


    def dropEvent(self, e):

        position = e.pos()
        self.button.move(position)

        e.setDropAction(Qt.MoveAction)
        e.accept()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    app.exec_()

В нашем примере кода, мы имеем QPushButton в окне. Если мы нажимаем на кнопку левой кнопкой мыши, в консоли печатается «press». С помощью перемещения кнопки с помощью правой кнопки мыши, мы выполняем операцию перетаскивания на виджет кнопки.

class Button(QPushButton):

    def __init__(self, title, parent):
        super().__init__(title, parent)

Мы создаём класс Button, который наследуется от QPushButton. Мы также переопределяем два метода: mouseMoveEvent() и mousePressEvent(). Метод mouseMoveEvent() – это место, где начинается операция перетаскивания.

if e.buttons() != Qt.RightButton:
    return

Здесь мы решили, что мы можем выполнять перетаскивание только с помощью правой кнопки мыши. Левая кнопка мыши резервируется для нажатия на кнопку.

mimeData = QMimeData()

drag = QDrag(self)
drag.setMimeData(mimeData)
drag.setHotSpot(e.pos() - self.rect().topLeft())

Создаётся объект QDrag. Класс обеспечивает поддержку перетаскивания данных, основанную на MIME-типе.

dropAction = drag.exec_(Qt.MoveAction)

Метод start() начинает операцию drag & drop.

def mousePressEvent(self, e):

    QPushButton.mousePressEvent(self, e)

    if e.button() == Qt.LeftButton:
        print('press')

Мы печатаем «press» в консоли, если мы делаем клик левой кнопкой мыши на кнопку. Обратите внмание, что мы также вызываем метод mousePressEvent() в родителе. В противном случае, мы не увидим, что кнопка была нажата (можете попробовать поэкспериментировать).

position = e.pos()
self.button.move(position)

В методе dropEvent(), мы определили, что произойдёт после того, как мы отпустим кнопку мыши и завершим операцию перетаскивания. Мы выясняем текущее положение указателя мыши и перемещаем кнопку соответствующим образом.

e.setDropAction(Qt.MoveAction)
e.accept()

Мы указываем тип действия перетаскивания. В нашем случае, это действие перемещения.

Эта часть руководства PyQt5 была посвящена операциям drag & Drop.

Дидактические основания технологии Drag-and-drop — Дидактор

Drag-and-drop (перетаскивание). Как известно, это форма выполнения каких-либо действий в графических интерфейсах пользователя (GUI), подразумевающая использование компьютерной мыши или маркера интерактивной доски. В переводе с английского означает буквально: тащи-и-бросай.

Технически это действие выполняется путём оперирования видимыми на экране монитора, проектора или на интерактивной доске объектами при помощи манипулятора мыши, как правило, при нажатой левой кнопке. Суть действий заключается в перемещении виртуальных объектов относительно друг друга и таким образом выполнении каких-либо действий.

Эта технология, прежде всего, имела и до сих пор имеет важные служебные цели и во многом облегчает работу программистов и пользователей с одним или несколькими приложениями, с различными массивами информации.

Наиболее распространёнными примерами drag-and-drop действий являются перемещение объекта по экрану, перемещение объекта в каталог и т.д.

В современных приложениях приём получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя. Эта технология встречается и технологиях Flash, и в надстройках ряда других программ, и в программном обеспечении большинства интерактивных досок.

Все чаще этот технологический приём встречается и в электронных обучающих программах. Однако далеко не всегда  используется его дидактический потенциал.

Варианты использования drag-and-drop.

1. При выполнении теста на соответствие. Группировка объектов по определенным видовым признакам и свойствам. К примеру, даты совместить с событиями, произведения с их авторами и т.д.
2. При выполнении теста на восстановление последовательности. Разместить объекты в хронологическом порядке.
3. При моделировании и конструировании. Ученик может передвигать визуальные объекты, создавать заданные учителем или придуманные новые объекты из набора деталей.
4. Перемещение объекта из одного места на экране в другое. К примеру, на экране высвечивается географическая карта, и ученик размещает из определённого «хранилища» условные обозначения полезных ископаемых, названия городов, стран и т.д.

В ряде приложений предусмотрена функция «правильного» и «неправильного» ответа. В таком случае при неправильной «траектории» передвижения объект автоматически возвращается обратно.

Таким образом, данный приём из сугубо технического превратился в эффективное средство визуализации мышления и усиления познавательной активности учащихся при различных формах обучения.

Об использовании технологии Drag-and-drop в приложении PowerPoint в Дидакторе была опубликована статья о макросе Ханса Хофмана

Технология Drag and Drop в Android





Недавно у меня появилась идея заняться разработкойигры для андроид. Для начала  я решил написать шахматы. Мне казалось технологияDrag and Drop отлично подойдет для реализации механизма перемещения фигур. Для непосвященных отмечу, чтометод drag and drop заключается в возможности перетаскивания одних графических объектов на другие и выполнения того или иного действия после отпускания. Простейший пример — удаление ярлыка с рабочего стола вашего ПК перетаскиванием его в корзину. «Кинув» ярлык в корзину, мы говорим системе, что хотим заставить взаимодействовать эти два объекта. Система получает наш сигнал и решает, какое действие ей стоит предпринять. Drag and drop получила широкое распространение благодаря своей интуитивной ясности. Этот подход подкреплен нашим опытом взаимодействия с объектами реального мира и прекрасно работает в виртуальной среде. Что же касается шахмат, с помощью drag and drop технологически проще определить клетку, куда пользователь перетащил фигуру, поскольку не нужно вычислять номер клетки по координатам точки отпускания. Эту работу возьмет на себя виртуальная машина.

Цели использования технологии Drag n Drop

Использование технологии drag and drop позволяет мне малой кровью решить три задачи:

1. Визуализация хода. Когда пользователь касается фигуры и начинает ее перемещение по экрану, фигура заменяется более мелким рисунком. Таким образом, пользователь понимает что фигура захвачена.
2. Я ограничил область перемещения фигуры размерами доски.
3. Если пользователь отпустил фигуру в неправильном месте, она должна вернуться в первоначальное положение.

Задачи обозначены, приступим к их реализации.

Подмена ImageView при касании

Все мои фигуры представляют собой объекты ImageView. К сожалению, оказалось что реализация Drag & Drop в Android не позволяет «прямо из коробки» осуществлять подмену изображения объекта при его касании. Тем не менее, эта задача вполне решаема средствами API. Нам понадобится выполнить ряд несложных действий:

1. Создать объект  DragShadowBuilder.
2. Вызвать метод startDrag.
3. Спрятать наш ImageView, который отображает фигуру, вызвав метод setVisibility с параметром View.INVISIBLE. В результате на экране останется только объект DragShadowBuilder, что будет сигналом пользователю о захвате фигуры.

Эти действия необходимо реализовать в обработчике OnTouchListner объекта  ImageView. Для этого переопределим метод onTouch:

@Override
public boolean onTouch(View view, MotionEvent motionEvent){
if(motionEvent.getAction()== MotionEvent.ACTION_DOWN){
ClipData clipData= ClipData.newPlainText("","");
View.DragShadowBuilder dsb=new View.DragShadowBuilder(view);
view.startDrag(clipData, dsb, view,0);
view.setVisibility(View.INVISIBLE);
returntrue;
}else{
returnfalse;
}
}

Все очень просто. Итак, с подменой изображения разобрались, перейдем к следующей задаче.

Ограничение области перетаскивания для функции drag drop

Ограничение области перетаскивания связано с одной проблемой. Дело в том, что если отпустить фигуру за пределами доски, события drop не случится, поскольку пользователь отпустил объект на пустом месте, и объекту не с чем взаимодействовать. В результате фигура не вернется в свое первоначальное состояние и так и останется навсегда спрятанной. Я убил уйму времени на чтение документации, но так и не нашел способа ограничить область перетаскивания объектов. Озарение пришло внезапно. Мне совсем не нужно ограничивать область, мне нужно узнать правильно ли пользователь отпустил фигуру или нет.

Определение правильности отпускания
Ответы на свои вопросы я нашел в разделе «handling drag end events» на сайте Android Developers. Вот несколько ключевых моментов:

1. Когда пользователь завершает перетаскивание в обработчике DragListeners генерируется событие  ACTION_DRAG_ENDED.
2. В DragListener можно получить более подробную информацию об операции drag, вызвав метод DragEvent.getResult().
3. Если DragListener возвращает true в ответ на событие ACTION_DROP, вызов getResult также вернет true, в противном случае — false.

Таким образом, мне нужно перехватить событие ACTION_DRAG_ENDED и вызывать метод getResult. Если он вернет false, значит пользователь утащил фигуру за пределы доски, и мне нужно перевести ImageView в видимый режим.

@Override
public boolean onDrag(View view, DragEvent dragEvent){
int dragAction= dragEvent.getAction();
View dragView=(View) dragEvent.getLocalState();
if(dragAction== DragEvent.ACTION_DRAG_EXITED){
containsDragable=false;
}elseif(dragAction== DragEvent.ACTION_DRAG_ENTERED){
containsDragable=true;
}elseif(dragAction== DragEvent.ACTION_DRAG_ENDED){
if(dropEventNotHandled(dragEvent)){
dragView.setVisibility(View.VISIBLE);
}
}elseif(dragAction== DragEvent.ACTION_DROP&& containsDragable){
checkForValidMove((ChessBoardSquareLayoutView) view, dragView);
dragView.setVisibility(View.VISIBLE);
}
returntrue;
}
 
private boolean dropEventNotHandled(DragEvent dragEvent){
return!dragEvent.getResult();
}

Теперь пользователь может где угодно отпускать фигуру, и ничего страшного не произойдет.

Определение допустимых ходов

Последняя часть статьи посвящена проверке допустимости хода, который пытается сделать пользователь. Прежде чем подробно приступить к обсуждению этой темы, сделаю небольшую ремарку, объясняющую структуру моего приложения. Шахматная доска представлена как  TableLayout, а каждая клетка является потомком LinearLayout  и имеет OnDragListener.

Кроме того, каждый OnDragListener ссылается на объект «посредника» (mediator), который заботится о взаимодействии игровых объектов и запоминает положение текущей клетки.

Когда пользователь тащит фигуру над клеткой, возможны следующие действия:

1. Использование события ACTION_DRAG_ENTERED для установки переменной  ‘containsDraggable’ в true.
2. Использование события ACTION_DRAG_EXITED  для установки переменной  ‘containsDraggable’ в false.
3. Использование события ACTION_DROP для запроса посредника о допустимости установки фигуры в эту клетку.

Ниже приведен код, реализующий описанную логику

@Override
public boolean onDrag(View view, DragEvent dragEvent){
int dragAction= dragEvent. getAction();
View dragView=(View) dragEvent.getLocalState();
if(dragAction== DragEvent.ACTION_DRAG_EXITED){
containsDragable=false;
}elseif(dragAction== DragEvent.ACTION_DRAG_ENTERED){
containsDragable=true;
}elseif(dragAction== DragEvent.ACTION_DRAG_ENDED){
if(dropEventNotHandled(dragEvent)){
dragView.setVisibility(View.VISIBLE);
}
}elseif(dragAction== DragEvent.ACTION_DROP&& containsDragable){
checkForValidMove((ChessBoardSquareLayoutView) view, dragView);
dragView.setVisibility(View.VISIBLE);
}
returntrue;
}

Как видите, не зависимо от того допустим ли ход или нет, ImageView переводится в видимое состояние. Я хотел, чтобы пользователь видел, как перемещается фигура. Ранее я упоминал, что клетка является потомком  LayoutView. Это сделано для того чтобы проще перемещать ImageView от клетки к клетке. Ниже приводится код метода checkForValidMove, который показывает, как происходит перемещение ImageView.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView){
if(mediator. isValidMove(view)){
ViewGroup owner=(ViewGroup) dragView.getParent();
owner.removeView(dragView);
view.addView(dragView);
view.setGravity(Gravity.CENTER);
view.showAsLanded();
mediator.handleMove(view);
}
}

Надеюсь, эта статья поможет Вам при разработке собственных проектов.

Источник:  Bill Bejeckat «Android Drag and Drop»
Перевод:Александр Ледков

UX паттерны для перетаскивания (Drag and Drop) компонентов в дизайн-системе | by Nancy Pong | Советы по проектированию интерфейса сайтов, мобильных приложений, и веб-сервисов

Компоненты в рамках дизайн-системы должны восприниматься как единое целое. По аналогии, и drag-and-drop взаимодействия в интерфейсе должны быть согласованы.

Дизайн-система — это не только согласованные элементы интерфейса. Процессы взаимодействия также должны быть согласованы.

Сейчас я расскажу вам, как разрабатывала drag-and-drop паттерны для дизайн системы Clarity (VMware). Clarity — дизайн система с открытым кодом, так что ею пользуются все желающие, а не только работники VMware.

Нашим пользователям нужна была функция drag-and-drop для некоторых компонентов интерфейса: древовидное меню, таблицы данных и карточки. Передо мной стояла задача — создать единый опыт взаимодействия по всем сценариям, связанным с drag-and-drop:

Сценарии взаимодействия с drag-and-drop:

• Изменять порядок и уровень вложенности элементов дерева
• Изменять порядок колонок в таблице данных
• Изменять порядок рядов в таблице данных
• Перетаскивать элементы между древовидным меню и таблицей данных
• Упорядочивать и объединять карточки

Когда в интерфейсе большое количество данных (как раз случай VMware), без drag-and-drop не обойтись — он упрощает работу со сложными и массивными объемами информации.

Для начала я создала небольшую библиотеку простых, но эффективных дизайн-аффордансов — свойств, которые будут обозначать drag-and-drop и связывать воедино этапы перетаскивания объектов. Когда появятся новые сценарии использования drag-and-drop, мы сможем применить к ним разработанные аффордансы.

Если вы с командой как раз создаете дизайн-систему, эта статья поможет вам при разработке ваших собственных drag-and-drop паттернов.

1. Лиловый цвет

Используйте для обозначения drag-and-drop взаимодействий определенный цвет, который не задействован в вашем дизайне. Не стоит использовать цвета, которые имеют определенное значение в дизайне (например, красный ассоциируется с разрушительными действиями).

Упорядочивание карточек

Для обозначения drag-and-drop мы выбрали лиловый. В Clarity он не является основным цветом, так что у пользователей он будет ассоциироваться только с drag-and-drop. Мы намеренно отказались от синего (обычно для drag-and-drop используют его), потому что в Clarity синие кнопки и другие кликабельные элементы.

2. Стили состояний

Определите стили для разных состояний перетаскиваемого элемента. Четко пропишите, как должен выглядеть элемент, когда пользователь его захватывает, перетаскивает и отпускает.

В Clarity к перетаскиваемому элементу применяются такие стили:

Изменение порядка элементов дерева

Благодаря небольшой тени создается впечатление, что элемент на самом деле перемещается над страницей.

Еще одно состояние, которое мы добавили — это исходное местоположение элемента на странице, которое мы называем “предыдущим положением”.

Перемещение из одной папки в другую в рамках дерева

Это напоминает пользователю, где перетаскиваемый элемент находился до этого.

Имейте в виду: мы не будем учитывать “предыдущее положение” при создании эффекта естественного движения (когда все окружающие элементы сдвигаются, уступая место перетаскиваемому объекту).

3. Системные курсоры

Системные курсоры подсказывают, что элемент можно перетаскивать. Это может показаться мелочью, но так пользователям гораздо проще обнаружить функции drag-and-drop в интерфейсе.

Для маков мы используем курсоры захвата (открытая ручка Микки Мауса) и захваченного состояния (зажатая ручка Микки Мауса). Курсор захвата появляется при наведении мыши на элемент, который можно перетаскивать. Непосредственно при перетаскивании появляется курсор захваченного состояния. После перетаскивания пользователи снова будут видеть курсор захвата. Если перетаскиваемый объект нельзя перетащить в определенную область интерфейса, то при наведении на эту область курсор будет в недоступном состоянии.

Для Windows мы используем курсор перемещения (перекрещенные стрелки). Этот курсор появляется при наведении на объект, который можно перетаскивать, а также в процессе перетаскивания. Опять же, если пользователь попытается “бросить” объект в недоступную область, курсор будет в недоступном состоянии.

4. Место назначения объекта

Определите паттерн для обозначения мест назначения — областей, куда можно “бросить” захваченный объект. По аналогии со стилями, нужно четко прописать, как должны выглядеть места назначения.

Поскольку в нашем случае пользователи будут менять объекты местами посредством drag-and-drop, мы обозначаем место назначения объекта линией.

Определение перетаскивания

Перетаскивание (также «перетаскивание») — это обычное действие, выполняемое в графическом пользовательском интерфейсе. Он включает в себя наведение курсора на объект, его выбор и перемещение в новое место.

Если вы используете мышь, вы можете перетащить объект, щелкнув кнопкой мыши, чтобы выбрать объект, а затем перемещать мышь, удерживая кнопку мыши нажатой. Это называется «перетаскивание» объекта. После того, как вы переместили объект в то место, куда хотите его поместить, вы можете поднять кнопку мыши, чтобы «уронить» объект в новом месте.Если вы используете устройство с сенсорным экраном, вы можете выбрать элемент, просто прикоснувшись к нему пальцем. (В некоторых интерфейсах может потребоваться удерживать палец на объекте в течение секунды или двух, чтобы выбрать его. ) Затем вы перетаскиваете объект, перемещая палец по экрану в то место, где вы хотите его разместить. Чтобы уронить объект, просто уберите палец с экрана.

Перетаскивание можно использовать для нескольких целей. Например, вы можете перетащить значок на рабочий стол, чтобы переместить его в папку.Вы можете перетащить открытое окно, щелкнув строку заголовка и переместив его в новое место. Некоторые программы позволяют открывать файлы, перетаскивая значки файлов прямо на значок приложения. Многие программы позволяют настраивать рабочее пространство, перетаскивая элементы интерфейса в разные места на экране. Компьютерные игры, такие как шахматы, обычно позволяют перемещать объекты в игре с помощью действия перетаскивания.

ПРИМЕЧАНИЕ: Поскольку перетаскивание — это простой и интуитивно понятный способ работы с объектами, программное обеспечение часто поддерживает возможность «редактирования перетаскиванием», что подразумевает простоту использования программного обеспечения.

Обновлено: 13 сентября 2011 г.

TechTerms — Компьютерный словарь технических терминов

Эта страница содержит техническое определение перетаскивания. Он объясняет в компьютерной терминологии, что означает перетаскивание, и является одним из многих программных терминов в словаре TechTerms.

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

Подпишитесь на информационный бюллетень TechTerms, чтобы получать избранные термины и тесты прямо в свой почтовый ящик. Вы можете получать электронную почту ежедневно или еженедельно.

Подписаться

HTML API перетаскивания — веб-API

HTML Drag and Drop Интерфейсы позволяют приложениям использовать функции перетаскивания в браузерах. Пользователь может выбрать перетаскиваемых элементов с помощью мыши, перетащить эти элементы на перетаскиваемый элемент и отпустить их, отпустив кнопку мыши.Полупрозрачное представление перетаскиваемых элементов следует за указателем во время операции перетаскивания.

Для веб-сайтов, расширений и приложений XUL вы можете настроить, какие элементы могут стать перетаскиваемыми , типом обратной связи перетаскиваемых элементов и отбрасываемых элементов.

Этот обзор HTML Drag and Drop включает описание интерфейсов, основные шаги по добавлению поддержки перетаскивания в приложение, а также обзор взаимодействия интерфейсов.

HTML-перетаскивание использует модель событий DOM и событий перетаскивания , унаследованных от событий мыши . Типичная операция перетаскивания начинается, когда пользователь выбирает перетаскиваемый элемент , перетаскивает элемент на перетаскиваемый элемент , а затем отпускает перетаскиваемый элемент.

Во время операций перетаскивания запускаются несколько типов событий, и некоторые события могут запускаться много раз, например, события drag и dragover .

С каждым типом события перетаскивания связан глобальный обработчик событий:

Примечание: Ни dragstart , ни dragend события не запускаются при перетаскивании файла в браузер из ОС.

HTML-интерфейсы Drag and Drop: DragEvent , DataTransfer , DataTransferItem и DataTransferItemList .

Интерфейс DragEvent имеет конструктор и одно свойство dataTransfer , которое является объектом DataTransfer .

Объекты DataTransfer включают состояние события перетаскивания, такое как тип выполняемого перетаскивания (например, копия или перемещение ), данные перетаскивания (один или несколько элементов) и тип MIME каждого элемента перетаскивания . DataTransfer Объекты также имеют методы для добавления или удаления элементов данных перетаскивания.

Интерфейсы DragEvent и DataTransfer должны быть единственными, необходимыми для добавления возможностей перетаскивания HTML в приложение.(Firefox поддерживает некоторые специфичные для Gecko расширения для объекта DataTransfer , но эти расширения будут работать только в Firefox.)

Каждый объект DataTransfer содержит свойство элементов , которое представляет собой список из объектов DataTransferItem . Объект DataTransferItem представляет один элемент перетаскивания , каждый из которых имеет свойство вида (либо строка , , либо файл ) и свойство типа для типа MIME элемента данных.Объект DataTransferItem также имеет методы для получения данных перетаскиваемого элемента.

Объект DataTransferItemList — это список объектов DataTransferItem . Объект списка имеет методы для добавления перетаскиваемого элемента в список, удаления перетаскиваемого элемента из списка и очистки списка от всех перетаскиваемых элементов.

Ключевое различие между интерфейсами DataTransfer и DataTransferItem заключается в том, что первый использует синхронный метод getData () для доступа к данным элемента перетаскивания, а второй вместо этого использует асинхронный метод getAsString () .

Примечание. DragEvent и DataTransfer широко поддерживаются настольными браузерами. Однако интерфейсы DataTransferItem и DataTransferItemList имеют ограниченную поддержку браузером. См. Взаимодействие для получения дополнительных сведений о взаимодействии перетаскивания.

Интерфейсы, специфичные для Gecko

Этот раздел представляет собой сводку основных шагов по добавлению функции перетаскивания в приложение.

Определите, что такое

перетаскиваемый

Чтобы сделать элемент перетаскиваемым , необходимо добавить атрибут draggable и глобальный обработчик событий ondragstart , как показано в следующем примере кода:

  <сценарий>
  function dragstart_handler (ev) {
    
    ev.dataTransfer.setData ("текст / простой", ev.target.id);
  }

  window.addEventListener ('DOMContentLoaded', () => {
    
    const element = document.getElementById ("p1");
    
    element.addEventListener ("dragstart", dragstart_handler);
  });


 Этот элемент можно перетаскивать. 
  

Для получения дополнительной информации см .:

Определение данных для перетаскивания

Приложение может включать любое количество элементов данных в операцию перетаскивания.Каждый элемент данных представляет собой строку определенного типа — обычно типа MIME, такого как text / html .

Каждое событие перетаскивания имеет свойство dataTransfer , которое содержит данных события. Это свойство (которое является объектом DataTransfer ) также имеет методы для управления данными перетаскивания . Метод setData () используется для добавления элемента к данным перетаскивания, как показано в следующем примере.

  function dragstart_handler (ev) {
  
  ev.dataTransfer.setData ("текст / простой", ev.target.innerText);
  ev.dataTransfer.setData ("текст / html", ev.target.outerHTML);
  ev.dataTransfer.setData ("текст / список URI", ev.target.ownerDocument.location.href);
}
  

• Список общих типов данных, используемых при перетаскивании (таких как текст, HTML, ссылки и файлы), см. В разделе Рекомендуемые типы перетаскивания.
• Для получения дополнительной информации о перетаскивании данных см. Перетаскивание данных.

Определите изображение перетаскивания

По умолчанию браузер предоставляет изображение, которое появляется рядом с указателем во время операции перетаскивания. Однако приложение может определить настраиваемое изображение с помощью метода setDragImage () , как показано в следующем примере.

  function dragstart_handler (ev) {
  
  
  
  let img = new Image ();
  img.src = 'example.gif';
  ev.dataTransfer.setDragImage (img, 10, 10);
}
  

Подробнее о перетаскивании изображений обратной связи:

Определите эффект перетаскивания.

.

Свойство dropEffect используется для управления обратной связью, которую пользователь получает во время операции перетаскивания.Обычно это влияет на то, какой курсор отображается в браузере при перетаскивании. Например, когда пользователь наводит курсор на цель перетаскивания, курсор браузера может указывать тип операции, которая будет выполняться.

Можно определить три эффекта:

1. копия указывает, что перетаскиваемые данные будут скопированы из текущего местоположения в место перетаскивания.
2. move указывает, что перетаскиваемые данные будут перемещены из текущего местоположения в место перетаскивания.
3. ссылка указывает, что какая-то форма отношения или связи будет создана между источником и местоположениями перетаскивания.

Во время операции перетаскивания эффекты перетаскивания могут быть изменены, чтобы указать, что определенные эффекты разрешены в определенных местах.

В следующем примере показано, как использовать это свойство.

  function dragstart_handler (ev) {
  ev.dataTransfer.dropEffect = "копировать";
}
  

Подробнее см .:

Определите зону перетаскивания

По умолчанию браузер предотвращает любые события при перетаскивании чего-либо на большинство элементов HTML.Чтобы изменить это поведение так, чтобы элемент стал зоной перетаскивания или был удаляемым , элемент должен иметь атрибуты обработчика событий ondragover и ondrop .

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

  <сценарий>
function dragover_handler (ev) {
 ev.preventDefault ();
 ev.dataTransfer.dropEffect = "переместить";
}
function drop_handler (ev) {
 ev.preventDefault ();
 
 const data = ev.dataTransfer.getData ("текст / простой");
 ev.target.appendChild (document.getElementById (данные));
}


 Зона перетаскивания 
  

Обратите внимание, что каждый обработчик вызывает preventDefault () для предотвращения дополнительной обработки событий для этого события (например, событий касания или событий указателя).

Для получения дополнительной информации см .:

Обработка эффекта перетаскивания

Обработчик события drop может обрабатывать данные перетаскивания в зависимости от приложения.

Обычно приложение использует метод getData () для извлечения элементов перетаскивания и последующей их соответствующей обработки. Кроме того, семантика приложения может отличаться в зависимости от значения dropEffect и / или состояния клавиш-модификаторов.

В следующем примере показано, как обработчик перетаскивания получает id исходного элемента из данных перетаскивания, а затем использует id для перемещения исходного элемента в элемент drop:

  <сценарий>
function dragstart_handler (ev) {
 
 ev.dataTransfer.setData ("приложение / мое-приложение", ev.target.id);
 ev.dataTransfer.effectAllowed = "переместить";
}
function dragover_handler (ev) {
 ev.preventDefault ();
 ev.dataTransfer.dropEffect = "переместить"
}
function drop_handler (ev) {
 ev.preventDefault ();
 
 const data = ev.dataTransfer.getData ("приложение / мое-приложение");
 ev.target.appendChild (document.getElementById (данные));
}


 Этот элемент можно перетаскивать.  
 Зона перетаскивания 
  

Для получения дополнительной информации см .:

Конец перетаскивания

В конце операции перетаскивания событие dragend срабатывает в исходном элементе — элементе, который был целью начала перетаскивания.

Это событие возникает независимо от того, было ли перетаскивание завершено или отменено. Обработчик событий dragend может проверить значение свойства dropEffect , чтобы определить, удалась ли операция перетаскивания или нет.

Для получения дополнительной информации о завершении операции перетаскивания см .:

Учебное пособие по перетаскиванию | H5P

Пример

Вот перетаскивание, которое мы создадим в этом руководстве:

Когда использовать Перетаскивание

Перетаскивание позволяет учащемуся связать два или более элементов и создавать логические соединения визуальным способом . Вот несколько примеров:

• Группируйте элементы, которые принадлежат друг другу или имеют что-то общее
• Сопоставьте объект с другим объектом
• Поместите элементы в правильном порядке
• Поместите элементы в правильное положение

Перетащите и отпустите используется для проверки знаний учащегося по заданной теме как вариант вопросов с несколькими вариантами ответов. Перетаскивание можно использовать отдельно или включить в наборы вопросов, интерактивные видео или презентации.В любом случае они создаются одинаково.

Шаг 1: Тема

Допустим, у вас есть текст о клубнике, для которого вы хотите создать вопрос с перетаскиванием. Приведенный ниже пример текста взят из Викисловаря:

Strawberry

Сочный, обычно красный съедобный плод некоторых растений рода Fragaria.

Шаг 2: Создание вопроса с перетаскиванием

Выберите параметр Новое содержимое и выберите Перетаскивание из списка типов содержимого:

Шаг 3.

Перетащите редактор вопросов

Перетащите и теперь должен появиться редактор вопросов.Верхняя часть редактора выглядит так:

В этом уроке мы сосредоточимся на создании содержимого вопросов с помощью перетаскивания. Создание контента происходит в верхней части редактора, поэтому мы сосредоточимся на этой части.

Создание вопроса с перетаскиванием выполняется в два этапа: Параметры и Задача . Вы можете в любое время нажимать вкладки Settings и Task в верхней части редактора для перехода между представлениями.

Шаг 4. Настройки

Настройки имеют дело с общими настройками, такими как фоновое изображение и размер.

Мы добавим это фоновое изображение:

Изображение было загружено с Викимедиа и находится под лицензией Creative Commons Attribution Share Alike.

Нажмите кнопку, чтобы добавить фоновое изображение. Перейдите туда, где вы скачали изображение клубники выше, и выберите его.

Только H5P 1.1: вы можете добавить информацию о лицензии для фонового изображения, нажав кнопку Изменить авторские права :

Поле Год (лет) не актуально в данном контексте, поэтому мы оставим это поле пустым.

Теперь, когда мы добавили фоновое изображение, я могу определить размер для вопроса «Перетащить и оставить». Поскольку изображение имеет ширину 800 пикселей и высоту 532 пикселей, я буду использовать этот размер для задачи.

После сохранения вопрос «Перетащить и оставить» будет масштабирован до максимальной ширины страницы, на которой он находится. Размер определяет ширину и высоту редактора, а также соотношение сторон вопроса перетаскивания, а не фактический размер в пикселях при просмотре.

Поскольку мы хотим, чтобы учащиеся могли попытаться решить вопрос перетаскивания несколько раз, а не только один раз, мы отметим опцию Включить «Повторить попытку» .

Дайте один балл за всю задачу Вариант более уместен, когда мы добавляем вопрос с перетаскиванием в наборы вопросов, интерактивные видео или презентации. Этот параметр контролирует оценку, которую получает учащийся за решение вопроса перетаскивания, когда он помещается в последовательность из нескольких задач.Поскольку мы создаем автономный вопрос с перетаскиванием, не имеет значения, оставим ли мы этот параметр отмеченным или нет.

Шаг 5: Задача

Нажмите вкладку Задача в верхней правой половине редактора, чтобы начать создание самой задачи.

Вы увидите, что фоновое изображение отображается с размером, определенным на вкладке Настройки .

Мы создадим вопрос с перетаскиванием, в котором пользователь пытается связать клубнику с соответствующим названием рода.Согласно Википедии, род — это таксономический ранг, используемый в биологической классификации живых и ископаемых организмов.

Из приведенного выше примера мы знаем, что клубника принадлежит к роду Fragaria . Другими примерами ягодных родов являются Rubus (например, малина) и Vaccinnium (например, черника). Мы будем использовать эти два последних примера как ложные альтернативы.

Вы увидите панель инструментов над фоновым изображением.

Панель инструментов позволяет вставлять:

	Dropzones
	Тексты
90 Drop481	и изображения

, в которых области и изображения Image перетаскиваемые элементы можно отбрасывать.

Шаг 6: Dropzone

Мы начинаем с добавления Dropzone поверх клубники, показанной на фоновом изображении. Нажмите кнопку Dropzone на панели инструментов, перетащите ее на фоновое изображение и поместите где-нибудь над клубникой.

Параметры Dropzone появляются, когда вы ее бросаете. Мы добавляем Label Fragaria , что является названием рода, к которому принадлежит Strawberry. Установите непрозрачность на 50, чтобы сделать его полупрозрачным.

У вас будет что-то вроде этого:

Нажмите Готово .

Теперь вы увидите белую зону над фоновым изображением. Переместите и измените размер dropzone так, чтобы она располагалась примерно над клубникой на фоновом изображении. Вы перемещаете зону перетаскивания, нажимая и перетаскивая ее в желаемое место. Чтобы изменить размер области перетаскивания, нажмите правый нижний угол области перетаскивания и перетащите вверх / вниз или влево / вправо, чтобы масштабировать область перетаскивания до правильных пропорций.

Дважды нажмите зону сброса, чтобы отредактировать ее в любое время.

Теперь у вас должно получиться что-то вроде этого:

Шаг 7: Добавьте текст

В этом уроке мы добавим три перетаскиваемых элемента Text ; один правильный и два неправильных. Изображения могут использоваться как перетаскиваемые элементы так же, как Текст .

Нажмите кнопку Текст на панели инструментов и перетащите ее на фоновое изображение. Вы можете разместить его справа от клубники. Параметры текста появляются, когда вы его бросаете.

В поле Label введите Vaccinium . В разделе Выберите зоны перетаскивания установите флажок Fragaria. Мы знаем, что это неправильное совпадение, однако мы хотим, чтобы учащийся мог бросить объект Vaccinium в зону сброса Fragaria .Если бы этот параметр не отмечен, учащемуся не разрешалось бы бросить объект в зону перетаскивания. Это более актуально в случаях, когда у вас более одной дроп-зоны.

Оставьте непрозрачность 100 и нажмите Готово . Теперь вы увидите перетаскиваемый объект Vaccinium , куда вы его поместили.

Перемещайте и изменяйте размер перетаскиваемого объекта по своему усмотрению. Вы перемещаете его, нажимая на него, а затем перетаскиваете туда, где хотите. Чтобы изменить размер, нажмите в правом нижнем углу объекта, а затем потяните в любом направлении для масштабирования.

Добавьте еще два перетаскиваемых элемента Text , выполнив ту же процедуру, что и выше. Однако маркируйте эти элементы Fragaria и Rubus соответственно. Разместите их аккуратным выравниванием справа от клубники.

Дважды нажмите перетаскиваемый объект, чтобы отредактировать его в любое время.

Надеюсь, теперь у вас будет что-то вроде этого:

Шаг 8: Определите правильное соответствие

Чтобы определить, какое совпадение между dropzone и перетаскиваемыми элементами является правильным, вы дважды нажимаете на dropzone.Это вызовет те же параметры зоны перетаскивания, что и на шаге 5.

Поскольку на предыдущем шаге вы определили связь между тремя перетаскиваемыми элементами и областью перетаскивания Fragaria , теперь вы увидите опцию Выбрать правильные элементы . Установите флажок Текст: Fragaria , чтобы определить этот перетаскиваемый объект как правильное соответствие.

Теперь установите непрозрачность на 0 (ноль) и нажмите Готово .

Несколько правильных элементов могут быть помещены в зону размещения.

Шаг 9: Завершение

Теперь мы более или менее закончили. Мы могли бы добавить обучающий текст, например: К какому роду принадлежит клубника? Нанесите правильное название рода на клубнику.

Это делается путем добавления элемента Text и ввода наших инструкций в поле Label .

Поскольку текст инструкции не должен быть перетаскиваемым элементом, мы не выбираем соответствующую зону перетаскивания.

Поместите текст инструкции в верхний правый угол и измените его размер по своему усмотрению.

Теперь у вас должно получиться что-то вроде этого:

Сохраните узел / статью, чтобы просмотреть готовый вопрос с перетаскиванием.
Теперь у вас должен быть тот же результат, что и в примере.
Не стесняйтесь оставлять любые комментарии или предложения по улучшению этого руководства.

Создание пользовательского интерфейса перетаскивания. Перетаскивание в контексте сети… | автор: Graeme

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

Например, инструмент дизайна Marvel имел уникальный случай использования, при котором компоненты перетаскивались вертикально между разделами, а также горизонтально:

Перетаскивание по вертикали между разделами Marvel Горизонтальное перетаскивание в разделах Marvel

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

Теперь, когда вы знаете, что существуют ограничения, я просмотрю библиотеки, которые я опробовал. Это только библиотеки React, так как Letter создан с помощью React:

Это одна из наиболее широко используемых библиотек, посмотрите статистику GitHub:

Преимущества

Преимущества этой библиотеки огромны — она ​​поможет вам широкий спектр сценариев проектирования, описанных в предыдущем разделе. На мой взгляд, именно поддержка специальных возможностей отличает его от остальных:

Это также довольно безгранично, когда дело доходит до поддержки устройств ввода.Посмотрите, датчик мысли 🤯:

Перетаскивание с помощью мозга 🧠, Чарли Джерард

… или датчик веб-камеры:

Перетаскивание датчика веб-камеры, Кан-Вэй Чан

См. Эти и другие примеры здесь.

Недостатки

Я думал, что в нем есть все, но была пара ограничений, из-за которых я не мог использовать эту библиотеку:

• У вас не может быть вложенных контейнеров, что означает, что 2 столбца перетаскивания не могут перекрываться. Это сделало мое всплывающее меню невозможным с библиотекой.
• Во время перетаскивания нет заполнителей (см. Это в следующем разделе)

Если эти недостатки вас не волнуют, попробуйте здесь. И есть целое видео-руководство, которое поможет вам шаг за шагом реализовать его здесь:

Я надеюсь вернуться к React-Beautiful, когда проблема с вложенным контейнером прокрутки будет исправлена ​​- в настоящее время они работают над этим.

Не такой крутой, как React-Beautiful, но это тот, который я выбрал пока. Это разработано Кутлу Сахином, и оно само по себе обладает большими преимуществами:

Преимущества

• Настраиваемый заполнитель — см. Синюю пунктирную линию выше.Это стало большим улучшением для общего опыта, так как нет никаких сомнений в том, где будет располагаться компонент.
• Более низкая скорость перетаскивания — React-beautiful-dnd был почти слишком чувствителен, из-за чего в моей реализации было сложно разместить компоненты в нужном месте. Эта библиотека кажется более управляемой и более медленной, что лучше подходит для больших компонентов.
• Нет ограничений на перекрывающиеся контейнеры. — это решает проблему, которую я имел с React-beautiful-dnd

Недостатки

Нет упоминания о поддержке клавиатуры или соображениях доступности с React-Smooth-DnD.Сейчас всем известно, что мы должны создавать доступность прежде всего, и я описал это в предыдущем разделе. Хотя теоретически это легко и очевидно, в реальности работа с очень ограниченным временем и ресурсами означает, что сделать доступной функцию перетаскивания сложно в одиночку. Для этого мне приходится полагаться на библиотеки с открытым исходным кодом.

Еще одна заслуживающая упоминания библиотека — React-DnD. Это было первое приложение, которое я использовал, когда приложение Letter называлось Email Otter. Мне было довольно сложно использовать его при добавлении анимации, поэтому я сразу переключился на React-beautiful-dnd.Поскольку мои знания об этой библиотеке ограничены, я не буду вдаваться в подробности о ней.

React DnD в действии

Использование страницы макета с перетаскиванием

Использование страницы макета с перетаскиванием

Домашняя страница> Создание приложения> Общие сведения об элементах уровня страницы> Использование Drag and Drop Lay …

Вы можете использовать страницу Drag and Drop Layout для интерактивного изменения порядка элементов в заданной области, изменения атрибутов выбранных элементов, создания новых элементов или удаления существующих элементов.

Темы:

Доступ к странице макета перетаскивания

Вы можете получить доступ к странице макета перетаскивания одним из следующих способов:

О макете перетаскивания Страница

Страница «Перетащить и оставить» разделена на две части: палитра элементов и область макета.

Описание иллюстрации drag_drap_pg.gif

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

Используйте правую часть страницы (или область макета) для размещения элементов. Чтобы переместить элемент по вертикали, нажмите кнопку «Добавить строку», чтобы вставить пустую строку. Затем перетащите элемент в пустую строку.

Создание нового объекта

Чтобы создать новый элемент на странице макета перетаскивания:

1. Перейдите на страницу макета с перетаскиванием. См. «Доступ к странице макета с перетаскиванием».

2. Щелкните тип элемента на палитре «Элемент» в левой части страницы и перетащите его в соответствующее место в области «Макет».

   Обратите внимание, что при наведении курсора на тип элемента появляется всплывающая подсказка.

3. Вы можете переместить элемент:

   • Чтобы переместить элемент по горизонтали, выберите элемент и перетащите его в нужное место на странице.

   • Чтобы вставить существующий или новый элемент между двумя существующими строками, нажмите кнопку «Добавить строку» и перетащите его между существующими строками.Это создает пустую строку, в которую затем можно переместить элемент.

4. Отредактируйте атрибуты элемента на странице.

   1. Отображаемое имя — введите имя элемента. Используйте это имя, чтобы получить значение элемента. На имена элементов длиной более 30 символов нельзя ссылаться с использованием синтаксиса переменной связывания.

   2. Этикетка — введите этикетку для этого элемента. Вы можете включать HTML, JavaScript и ярлыки.Вы также можете использовать строку подстановки # CURRENT_ITEM_NAME # , чтобы получить имя элемента, связанного с этой меткой.

   3. Тип дисплея — выберите тип дисплея (если применимо). Обратите внимание, что список выбора ограничен параметрами, соответствующими типу создаваемого вами элемента. См. «О типах элементов».

5. Щелкните Далее.

6. При желании отредактируйте имя и метку каждого элемента.

7. Щелкните Применить изменения.

О списке значений

Если вы создаете элемент, для которого требуется список значений (LOV), мастер перетаскивания макета создает для вас статический встроенный LOV. Обратите внимание, что вы должны отредактировать и исправить этот LOV после завершения процесса макета.

Редактирование существующих элементов

Для редактирования существующего элемента на странице «Перетаскивание»:

1. Перейдите на страницу макета с перетаскиванием.См. «Доступ к странице макета с перетаскиванием».

2. Чтобы переместить элемент:

   • Чтобы переместить элемент по горизонтали, выберите элемент и перетащите его в нужное место на странице.

   • Чтобы вставить существующий или новый элемент между двумя существующими строками, нажмите кнопку «Добавить строку» и перетащите его между существующими строками. Это создает пустую строку, в которую затем можно переместить элемент.

3. При необходимости выберите элемент и отредактируйте его атрибуты на странице.

   1. Отображаемое имя — введите имя элемента. Используйте это имя, чтобы получить значение элемента. На имена элементов длиной более 30 символов нельзя ссылаться с использованием синтаксиса переменной связывания.

   2. Этикетка — введите этикетку для этого элемента. Вы можете включать HTML, JavaScript и ярлыки. Вы также можете использовать строку подстановки # CURRENT_ITEM_NAME # , чтобы получить имя элемента, связанного с этой меткой.

   3. Тип дисплея — выберите тип дисплея (если применимо).Обратите внимание, что список выбора ограничен параметрами, соответствующими типу создаваемого вами элемента. См. «О типах элементов». См. «О типах элементов».

4. Щелкните Далее.

5. При желании отредактируйте имя и метку каждого элемента.

6. Щелкните Применить изменения.

Удаление элементов

Чтобы удалить элемент, щелкните его и перетащите в поле «Утилизация» внизу страницы.Если вы удалите существующий элемент, он появится в поле «Утилизация», и его можно будет восстановить, пока вы не нажмете «Применить изменения» на следующей странице. Обратите внимание: если вы поместите новый элемент, который вы только что создали, в поле «Утилизация», он мгновенно исчезнет и не сможет быть восстановлен.

Загрузка методом перетаскивания в Moodle | UMass Amherst Information Technology

В Moodle вы можете перетаскивать файлы прямо с рабочего стола вашего компьютера или из окна приложения в свой курс.

Известные проблемы

• Эта функция работает с последними версиями Mozilla Firefox, Google Chrome и Safari 6 для Mac OS 10.7 и новее.
• Перетаскивание не работает с Microsoft Internet Explorer 9 или более ранней версии, или Safari 5.x или более ранней версии.
• Если вы не можете надежно переупорядочить только что загруженные ресурсы, обновите страницу.
• Вы не можете перетащить папку с файлами в Moodle.

Перетаскивание загрузки в рамках действия

При загрузке файлов из занятия вы можете перетаскивать файлы прямо в область файлов .

1. Расположите окна рабочего стола компьютера так, чтобы вы могли просматривать как окно браузера, так и файлы на компьютере (например, в открытой папке или на рабочем столе).
2. Перетащите файлы с компьютера и отпустите их над синей стрелкой в ​​области Выберите файлов .

   Файлы появятся в области Выбрать файлы .

   Примечание : Если у вас установлено приложение Google Drive и вы перетаскиваете файлы со своего Google Drive в Moodle, будьте осторожны при загрузке .gdoc файл. Файлы с расширением .gdoc имеют проприетарный формат Google и должны просматриваться в Интернете в Google Apps. Чтобы добавить файл .gdoc в Moodle с помощью перетаскивания, который можно просматривать за пределами Google Apps, см. Преобразование .gdoc для использования вне Google.

3. Прокрутите страницу вниз и нажмите Сохранить изменения (или Опубликовать на форуме , если прикрепляете файл к форуму).

Перетащите файлы в раздел вашего курса. Страница

Преподаватели могут добавлять файловые ресурсы прямо на страницу курса с помощью перетаскивания.

1. На домашней странице курса щелкните Включить редактирование на (вверху справа). Появятся значки и ссылки редактирования.
2. Найдите тему или еженедельный раздел , куда вы добавите файл. (Если вы используете в своем курсе формат свернутой темы , сначала откройте раздел.)
3. Прокрутите вниз (при необходимости), чтобы увидеть нижнюю часть темы или еженедельного раздела. Новые ресурсы всегда будут добавляться в нижнюю часть раздела.
4. Расположите окна рабочего стола компьютера так, чтобы вы могли просматривать как окно браузера, так и файлы на компьютере (например, в открытой папке или на рабочем столе).
   (щелкните, чтобы увеличить)
   Примечание : вы не можете перетащить папку с файлами со своего компьютера, но если вы добавите ресурс папки, вы можете перетащить несколько файлов одновременно на синюю стрелку на Обновить / редактировать папку стр. (См. Выше).
   • Чтобы загрузить один файл:
     Перетащите файл со своего компьютера в конец раздела курса.Индикатор «Добавить сюда файлы» покажет, где файл будет отображаться в разделе курса, когда вы отпустите кнопку мыши.
   • Для одновременной загрузки нескольких файлов:
     Удерживая нажатой клавишу CTRL, щелкните имена файлов (для Mac используйте КОМАНДУ + щелчок), затем перетащите их в раздел в Moodle. Слова «Добавить сюда файлы» покажут, где файлы будут отображаться в разделе курса, когда вы отпустите кнопку мыши.
     Название файла (ов) будет соответствовать имени файла (без расширения файла, т.е.е., нет .pdf).
   • Для загрузки архива .zip, содержащего несколько файлов
     Перетащите файл со своего компьютера в конец раздела курса. Появятся слова «Добавьте сюда файл (ы)». Когда вы отпустите файл, всплывающее окно спросит, что делать с файлом. Выбирать между:
     • Распакуйте файлы и создайте папку: Это создаст ресурс папки, содержащий распакованные файлы.
     • Создайте файловый ресурс : Будет опубликован файл.zip-файл в качестве файлового ресурса, который студенты могут скачать и распаковать.
     • Добавить пакет SCORM : Если вам был предоставлен файл .zip, содержащий пакет SCORM (например, от издателя учебника), заархивированные файлы будут отправлены как пакет SCORM. ??
       Щелкните Загрузить . Moodle добавит контент в ваш курс.
5. Примечание: Если у вас установлено приложение Google Drive и вы перетаскиваете файлы со своего Google Drive в Moodle, будьте осторожны при загрузке .gdoc файл. Файлы с расширением .gdoc имеют проприетарный формат Google и должны просматриваться в Интернете в Google Apps. Чтобы добавить файл .gdoc в Moodle с помощью перетаскивания, который можно просматривать за пределами Google Apps, см. Преобразование .gdoc для использования вне Google.
6. Щелкните ссылку , чтобы убедиться, что файл открывается правильно. Чтобы изменить настройки для загруженного элемента, щелкните его значок Обновление ().
   Примечание : Если вы загрузите файл .zip из MAC OS в папку, в папке могут оказаться ненужные файлы, которые запутают ваших учеников.Подробнее см. Добавление папки с файлами в Moodle.
7. Чтобы переместить ресурс из нижней части раздела, используйте значок Переместить ? (), чтобы перетащить метку на место. Для получения дополнительной информации см. Изменение порядка разделов или элементов в курсе Moodle.

Перетащите изображение, чтобы создать этикетку

Вы можете перетащить изображение на страницу своего курса и выбрать, будет ли оно отображаться встроенным в ярлык или как ресурс, на который можно нажать.

1. Перетащите изображение с рабочего стола на страницу курса.При появлении запроса выберите Добавить изображение на страницу курса, , затем щелкните Загрузить . Изображение появится на странице курса.

2. Ярлыки появляются в нижней части раздела при первом добавлении. Используйте значок Move (), чтобы перетащить этикетку на место. Для получения дополнительной информации см. Изменение порядка разделов или элементов в курсе Moodle.

Перетаскивание — документация Ren’Py

Ren’Py включает отображаемые элементы перетаскивания, которые позволяют
перемещался по экрану с помощью мыши.Некоторые из применений перетаскивания
являются:

• Разрешение изменения положения окон пользователем, сохранение окна
  позиции.
• Карточные игры, требующие перетаскивания карточек по экрану. (За
  Например, пасьянс.)
• Инвентарные системы.
• Системы перетаскивания для изменения порядка.

Отображаемые объекты перетаскивания позволяют реализовать эти и
другие способы использования перетаскивания. Здесь задействованы два класса. В
Класс перетаскивания представляет собой то, что можно перетаскивать
экран, что-то, на что можно перетащить, или
то, что может делать и то, и другое.Класс DragGroup представляет группу
Перетаскивание — для выполнения перетаскивания оба перетаскивания должны быть частью
та же группа перетаскивания.

Систему перетаскивания можно использовать либо через Экран
Язык или напрямую как отображаемые. Имеет смысл использовать
язык экрана, когда вам не нужно обращаться к перетаскиванию, которое вы
создавать после того, как они были созданы. Это могло быть так, если
draggable представляет собой окно, которое пользователь помещает на экран. Если
вам нужно ссылаться на перетаскивания после того, как они были созданы, тогда это
часто лучше создавать перетаскивания напрямую и добавлять их в DragGroup.

Отображаемые объекты

class Drag ( d = None , drag_name = None , draggable = True , droppable = True , drag_raise = True , drag = None , drop = None , drag_handle = (0,0 , 0,0 , 1,0 , 1,0) , drag_joined = … , clicked = None , hovered = None , unhovered = None , mouse_drop = False , ** недвижимость )

Отображаемый объект, который представляет объект, который можно перетаскивать
его ограждающая территория.Перетаскивание также может представлять область,
другие Drags могут быть сброшены.

Перетаскивание можно перемещать внутри родительского элемента. Как правило, его родитель
должно быть либо Fixed () , либо DragGroup .

У перетаскивания есть один ребенок. Состояние ребенка отражает статус
операции перетаскивания:

• selected_hover — при перетаскивании.
• selected_idle — когда его можно сбросить.
• hover — когда перетаскиваемый будет перетаскиваться, когда мышь
  щелкнул.
• холостой ход — иначе.

Маркер перетаскивания представляет собой прямоугольник внутри дочернего элемента. Мышь должна быть над
непрозрачный пиксель внутри маркера перетаскивания для перетаскивания или щелчка
происходить.

Вновь созданный перетаскиваемый объект добавляется к DragGroup по умолчанию. Перетаскиваемый
может быть только в одной DragGroup — если она добавлена ​​во вторую группу,
он удален из первого.

При первом рендеринге перетаскивания, если его положение не может быть определено
из DragGroup, в которой он находится, положение его верхнего левого угла
вычисляется с использованием стандартного алгоритма компоновки.Однажды эта позиция
был вычислен, свойства макета игнорируются в пользу
положение, хранящееся внутри Drag.

д

Если присутствует, дочерний элемент этого перетаскивания. Перетаскивание использует дочерний стиль
в предпочтение к этому, если это не None.

drag_name

Если не None, имя перетаскиваемого объекта. Это доступно
как свойство name перетаскиваемых объектов. Если перетащить
с таким же именем находится или был в DragGroup, начальный
позиция этого перетаскивания берется из этого перетаскиваемого элемента.

перетаскиваемый

Если true, перетаскивание можно перемещать по экрану с помощью
мышь.

сбрасываемый

Если true, другие перетаскивания могут быть сброшены на этом перетаскивании.

drag_raise

Если истина, перетаскивание поднимается вверх при перетаскивании. Если
он соединяется с другими перетяжками, все соединенные перетаскивания поднимаются.

активировано

Обратный вызов (или список обратных вызовов), который вызывается, когда мышь
нажимается на перетаскивание.Он вызывается с одним аргументом, a
список перетаскиваемых перетаскиваний. Возвращаемое значение этого
обратный вызов игнорируется.

перетащили

Обратный вызов (или список обратных вызовов), который вызывается при перетаскивании
перетащили. Вызывается с двумя аргументами. Первый
список перетаскиваемых перетаскиваний. Второй либо
перетаскивание, на которое падает, или ни одно падение не
происходить. Если обратный вызов возвращает значение, отличное от None, это
значение возвращается как результат взаимодействия.

сброшено

Обратный вызов (или список обратных вызовов), который вызывается при перетаскивании
падает на. Вызывается с двумя аргументами. Первый
перетаскивается на. Второй — это список перетаскивания,
тянутся. Если обратный вызов возвращает значение, отличное от None,
это значение возвращается в результате взаимодействия.

Когда перетаскиваемый обратный вызов запускается для того же
событие, отброшенный обратный вызов вызывается только в том случае, если перетаскивание возвращает
Никто.

нажали

Обратный вызов this вызывается без аргументов, когда Drag
щелкнули без перемещения. Отбрасываемый объект также можно сфокусировать
и щелкнул. Если обратный вызов возвращает значение, отличное от None,
это значение возвращается в результате взаимодействия.

запасной

Действие, которое запускается при щелчке правой кнопкой мыши по перетаскиванию (на
рабочий стол) или долгое нажатие без движения (на мобильном телефоне). Это может
нужно увеличить конфиг.longpress_duration , если
это приводит к раннему запуску мобильных платформ.

перетащите рукоятку

Кортеж (x, y, width, height), задающий позицию перетаскивания
обрабатывать внутри ребенка. В этом наборе считаются целые числа
быть буквальным числом пикселей, а число с плавающей запятой — относительно
размер ребенка.

перетащить

Это вызывается с текущим перетаскиванием в качестве аргумента. Это
ожидается возврат списка кортежей [(drag, x, y)], что дает
перетаскиваемые объекты перетаскивать как единое целое. x и y — смещения
тяг относительно друг друга, они не относительны
в угол этого сопротивления.

drag_offscreen

Если true, перетаскиваемый объект можно переместить за пределы экрана. Это может быть
опасно использовать с drag_joined или перетаскиванием, которое может изменить
размер, так как перетаскивание может полностью покинуть экран, без
способ вернуть их на экран.

mouse_drop

Если истина, перетаскивание перетаскивается на первый объект для перетаскивания под курсором.Если false, то по умолчанию перетаскивание перетаскивается на отбрасываемый объект с помощью
самая большая степень перекрытия.

drop_allowable

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

За исключением d , все параметры доступны в виде полей (с
с таким же именем) на объекте Drag.Кроме того, после того, как сопротивление
Отрисовано, становятся доступны следующие поля:

x , y

Положение перетаскивания относительно родительского элемента в пикселях.

ширина , высота

Ширина и высота дочернего элемента перетаскивания в пикселях.

нижний ( сам )

Опускает этот отображаемый объект в нижнюю часть его drag_group.

set_child ( d )

Изменяет дочернего элемента этого перетаскивания на d .

привязка ( x , y , задержка = 0 )

Изменяет положение перетаскивания. Если перетаскивание не отображается,
тогда изменение положения происходит мгновенно. В противном случае
изменение положения занимает секунд задержки секунд и анимировано как
линейный ход.

верх ( сам )

Поднимает этот отображаемый объект в верхнюю часть его drag_group.

класс DragGroup ( * дети , ** свойства )

Представляет группу перетаскиваний.Перетаскивание ограничено границей
его DragGroup. Отбрасывание работает только между перетаскиванием, находящимся в
тот же DragGroup. Фрагменты могут быть подняты только тогда, когда они находятся внутри
DragGroup.

DragGroup имеет вид Fixed () .

Все позиционные параметры конструктора DragGroup должны быть
Перетаскивания, которые добавляются в DragGroup.

min_overlap

Целое число, обозначающее минимальное количество пикселей в
перекрывать, чтобы можно было падение.

добавить ( ребенок )

Добавляет дочернего элемента , который должен быть перетаскиванием, к этой DragGroup.

get_child_by_name ( имя )

Возвращает первого дочернего элемента этой DragGroup, у которого есть drag_name
имени.

удалить ( ребенок )

Удаляет потомка из этой DragGroup.

Примеры

Пример экрана say, который позволяет пользователю выбрать местоположение
окна, перетаскивая его по экрану.:

Экран

 говорит:

    тащить:
        drag_name "сказать"
        yalign 1.0
        перетащить_handle (0, 0, 1.0, 30)

        xalign 0.5

        идентификатор окна "окно":
            # Убедитесь, что окно меньше экрана.
            xмаксимум 600

            есть vbox

            если кто:
                текст who id "who"

            текст какой идентификатор "что"
 

Вот более сложный пример, который показывает, как можно перетаскивать
используется для влияния на игровой процесс. Он показывает, как перетаскивание можно использовать для
отправить персонажа в локацию:

 init python:

    def Detective_dragged (перетаскивает, бросает):

        если не уронить:
            возвращаться

        хранить.детектив = перетаскивает [0] .drag_name
        store.city = drop.drag_name

        вернуть True

экран send_detective_screen:

    # Карта в качестве фона.
    добавить "europe.jpg"

    # Группа перетаскивания гарантирует, что детективы и города могут быть
    # перетащили друг к другу.
    draggroup:

        # Наши сыщики.
        тащить:
            drag_name "Плющ"
            ребенок "ivy.png"
            сбрасываемый False
            притащил детектив
            xpos 100 ypos 100
        тащить:
            drag_name "Zack"
            ребенок "зак.png "
            сбрасываемый False
            притащил детектив
            xpos 150 ypos 100

        # Города, в которые они могут поехать.
        тащить:
            drag_name "Лондон"
            дочерний "london.png"
            перетаскиваемый False
            xpos 450 ypos 140
        тащить:
            drag_name "Париж"
            перетаскиваемый False
            дочерний "paris.png"
            xpos 500 ypos 280

метка send_detective:
    «Нам нужно расследовать! Кого мы должны послать и куда они должны пойти?»

    экран вызова send_detective_screen

    «Хорошо, мы отправим [детектива] в [город]."
 

Более сложные системы требуют значительных навыков программирования, чтобы
верно. Карточная игровая платформа Ren’Py
является примером того, как использовать перетаскивание в сложном
система и полезна для самостоятельного создания карточных игр.

Предложение as можно использовать для привязки перетаскивания к переменной, которая затем может быть
используется для вызова методов перетаскивания.

 снимок экрана ():

    тащить:
        как Кармен
        перетаскиваемый True
        xpos 100 ypos 100
        Рамка:
            стиль "пустой"
            фон "кармен.png "
            xysize (100, 100)

            vbox:
                текстовая кнопка "Лондон" функция действия (carmen.snap, 450, 140, 1.0)
                текстовая кнопка "Париж" функция действия (carmen.snap, 500, 280, 1.0)
 

.

No related posts.