551 lines
34 KiB
HTML
551 lines
34 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>Drag and Drop — Ren'Py Documentation</title>
|
|||
|
|
<link rel="stylesheet" href="_static/renpydoc.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-3.3.6/css/bootstrap.min.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-3.3.6/css/bootstrap-theme.min.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="_static/bootstrap-sphinx.css" />
|
|||
|
|
<script type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/underscore.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/doctools.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/language_data.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/js/jquery-1.11.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/js/jquery-fix.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/bootstrap-3.3.6/js/bootstrap.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/bootstrap-sphinx.js"></script>
|
|||
|
|
<link rel="index" title="Index" href="genindex.html" />
|
|||
|
|
<link rel="search" title="Search" href="search.html" />
|
|||
|
|
<link rel="next" title="Sprites" href="sprites.html" />
|
|||
|
|
<link rel="prev" title="Image Gallery, Music Room, and Replay Actions" href="rooms.html" />
|
|||
|
|
<meta charset='utf-8'>
|
|||
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
|
|||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1'>
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|||
|
|
|
|||
|
|
</head><body>
|
|||
|
|
|
|||
|
|
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="navbar-header">
|
|||
|
|
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
|||
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
<span class="icon-bar"></span>
|
|||
|
|
</button>
|
|||
|
|
<a class="navbar-brand" href="index.html">
|
|||
|
|
Ren'Py Documentation</a>
|
|||
|
|
<span class="navbar-text navbar-version pull-left"><b>7.5.3</b></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="collapse navbar-collapse nav-collapse">
|
|||
|
|
<ul class="nav navbar-nav">
|
|||
|
|
|
|||
|
|
<li><a href="https://www.renpy.org">Home Page</a></li>
|
|||
|
|
<li><a href="https://www.renpy.org/doc/html/">Online Documentation</a></li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="dropdown globaltoc-container">
|
|||
|
|
<a role="button"
|
|||
|
|
id="dLabelGlobalToc"
|
|||
|
|
data-toggle="dropdown"
|
|||
|
|
data-target="#"
|
|||
|
|
href="index.html">Site <b class="caret"></b></a>
|
|||
|
|
<ul class="dropdown-menu globaltoc"
|
|||
|
|
role="menu"
|
|||
|
|
aria-labelledby="dLabelGlobalToc"><ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="quickstart.html">Quickstart</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="gui.html">GUI Customization Guide</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="language_basics.html">Language Basics</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="label.html">Labels & Control Flow</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="dialogue.html">Dialogue and Narration</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="displaying_images.html">Displaying Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="menus.html">In-Game Menus</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="python.html">Python Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="conditional.html">Conditional Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="audio.html">Audio</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="movie.html">Movie</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="voice.html">Voice</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="text.html">Text</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="translation.html">Translation</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="displayables.html">Displayables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="transforms.html">Transforms</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="transitions.html">Transitions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="atl.html">Animation and Transformation Language</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="matrixcolor.html">Matrixcolor</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="layeredimage.html">Layered Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="3dstage.html">3D Stage</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="live2d.html">Live2D Cubism</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="style.html">Styles</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="style_properties.html">Style Properties</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screens.html">Screens and Screen Language</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_actions.html">Screen Actions, Values, and Functions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_special.html">Special Screen Names</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_optimization.html">Screen Language Optimization</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="config.html">Configuration Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="preferences.html">Preference Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="store_variables.html">Store Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="mouse.html">Custom Mouse Cursors</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="launcher.html">Launcher</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="developer_tools.html">Developer Tools</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="director.html">Interactive Director</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="current">
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="nvl_mode.html">NVL-Mode Tutorial</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="input.html">Text Input</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="side_image.html">Side Images</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="rooms.html">Image Gallery, Music Room, and Replay Actions</a></li>
|
|||
|
|
<li class="toctree-l1 current"><a class="current reference internal" href="#">Drag and Drop</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="sprites.html">Sprites</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="keymap.html">Customizing the Keymap</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="achievement.html">Achievements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="history.html">Dialogue History</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="multiple.html">Multiple Character Dialogue</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="splashscreen_presplash.html">Splashscreen and Presplash</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="statement_equivalents.html">Statement Equivalents</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="save_load_rollback.html">Saving, Loading, and Rollback</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="persistent.html">Persistent Data</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="trans_trans_python.html">Transforms and Transitions in Python</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="gui_advanced.html">Advanced GUI</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="screen_python.html">Screens and Python</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="modes.html">Modes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="cdd.html">Creator-Defined Displayables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="cds.html">Creator-Defined Statements</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="custom_text_tags.html">Custom Text Tags</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="character_callbacks.html">Character Callbacks</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="file_python.html">File Access</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="color_class.html">Color Class</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="matrix.html">Matrix</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="model.html">Model-Based Rendering</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="other.html">Other Functions and Variables</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="build.html">Building Distributions</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="updater.html">Web Updater</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="android.html">Android</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="chromeos.html">Chrome OS/Chromebook</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="ios.html">iOS</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="iap.html">In-App Purchasing</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="gesture.html">Gestures</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="raspi.html">Raspberry Pi</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="security.html">Security</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="problems.html">Dealing with Problems</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="environment_variables.html">Environment Variables</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="self_voicing.html">Self-Voicing</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="editor.html">Text Editor Integration</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="skins.html">Skins</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="translating_renpy.html">Translating Ren'Py</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog (Ren'Py 7.x-)</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="changelog6.html">Changelog (Ren'Py 6.11 - 6.99)</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="incompatible.html">Incompatible Changes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="distributor.html">Distributor Notes</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="license.html">License</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="credits.html">Credits</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="sponsors.html">Ren'Py Development Sponsors</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="thequestion.html">Script of The Question</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="thequestion_nvl.html">NVL-mode script for The Question</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<form class="navbar-form navbar-right" action="search.html" method="get">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<input type="text" name="q" class="form-control" placeholder="Search" />
|
|||
|
|
</div>
|
|||
|
|
<input type="hidden" name="check_keywords" value="yes" />
|
|||
|
|
<input type="hidden" name="area" value="default" />
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div id="sidebar" class="bs-sidenav" role="complementary"><ul>
|
|||
|
|
<li><a class="reference internal" href="#">Drag and Drop</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#displayables">Displayables</a></li>
|
|||
|
|
<li><a class="reference internal" href="#examples">Examples</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-9 content">
|
|||
|
|
|
|||
|
|
<div class="section" id="drag-and-drop">
|
|||
|
|
<span id="id1"></span><h1>Drag and Drop<a class="headerlink" href="#drag-and-drop" title="Permalink to this headline"> link</a></h1>
|
|||
|
|
<p>Ren'Py includes drag and drop displayables that allow things to be
|
|||
|
|
moved around the screen with the mouse. Some of the uses of dragging
|
|||
|
|
are:</p>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li>Allowing windows to be repositioned by the user, storing the window
|
|||
|
|
positions.</li>
|
|||
|
|
<li>Card games that require cards to be dragged around the screen. (For
|
|||
|
|
example, solitaire.)</li>
|
|||
|
|
<li>Inventory systems.</li>
|
|||
|
|
<li>Drag-to-reorder systems.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>The drag and drop displayables make it possible to implement these and
|
|||
|
|
other uses of drag and drop. There are two classes involved here. The
|
|||
|
|
Drag class represents either something that can be dragged around the
|
|||
|
|
screen, something that can have a draggable dropped onto it, or
|
|||
|
|
something that can do both. The DragGroup class represents a group of
|
|||
|
|
Drags – for a drag and drop to occur, both Drags must be part of the
|
|||
|
|
same drag group.</p>
|
|||
|
|
<p>The drag and drop system can be used either through the <a class="reference internal" href="screens.html"><span class="doc">Screen
|
|||
|
|
Language</span></a> or directly as displayables. It makes sense to use
|
|||
|
|
the screen language when you don't need to refer to the Drags that you
|
|||
|
|
create after they've been created. This might be the case if the
|
|||
|
|
draggable represents a window that the user places on the screen. If
|
|||
|
|
you need to refer to the drags after they've been created, then it's
|
|||
|
|
often better to create Drags directly, and add them to a DragGroup.</p>
|
|||
|
|
<div class="section" id="displayables">
|
|||
|
|
<h2>Displayables<a class="headerlink" href="#displayables" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<dl class="class">
|
|||
|
|
<dt id="Drag">
|
|||
|
|
<em class="property">class </em><code class="descname">Drag</code><span class="sig-paren">(</span><em>d=None</em>, <em>drag_name=None</em>, <em>draggable=True</em>, <em>droppable=True</em>, <em>drag_raise=True</em>, <em>dragging=None</em>, <em>dragged=None</em>, <em>dropped=None</em>, <em>drag_handle=(0.0</em>, <em>0.0</em>, <em>1.0</em>, <em>1.0)</em>, <em>drag_joined=...</em>, <em>clicked=None</em>, <em>hovered=None</em>, <em>unhovered=None</em>, <em>mouse_drop=False</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#Drag" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>A displayable that represents an object that can be dragged around
|
|||
|
|
its enclosing area. A Drag can also represent an area that
|
|||
|
|
other Drags can be dropped on.</p>
|
|||
|
|
<p>A Drag can be moved around inside is parent. Generally, its parent
|
|||
|
|
should be either a <a class="reference internal" href="displayables.html#Fixed" title="Fixed"><code class="xref py py-func docutils literal notranslate"><span class="pre">Fixed()</span></code></a> or <a class="reference internal" href="#DragGroup" title="DragGroup"><code class="xref py py-class docutils literal notranslate"><span class="pre">DragGroup</span></code></a>.</p>
|
|||
|
|
<p>A Drag has one child. The child's state reflects the status
|
|||
|
|
of the drag and drop operation:</p>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><code class="docutils literal notranslate"><span class="pre">selected_hover</span></code> - when it is being dragged.</li>
|
|||
|
|
<li><code class="docutils literal notranslate"><span class="pre">selected_idle</span></code> - when it can be dropped on.</li>
|
|||
|
|
<li><code class="docutils literal notranslate"><span class="pre">hover</span></code> - when the draggable will be dragged when the mouse is
|
|||
|
|
clicked.</li>
|
|||
|
|
<li><code class="docutils literal notranslate"><span class="pre">idle</span></code> - otherwise.</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>The drag handle is a rectangle inside the child. The mouse must be over
|
|||
|
|
a pixel inside the drag handle for dragging or clicking to occur. If the
|
|||
|
|
<a class="reference internal" href="style_properties.html#style-property-focus_mask"><code class="xref std std-propref docutils literal notranslate"><span class="pre">focus_mask</span></code></a> property is True, that pixel must not be transparent.</p>
|
|||
|
|
<p>A newly-created draggable is added to the default DragGroup. A draggable
|
|||
|
|
can only be in a single DragGroup - if it's added to a second group,
|
|||
|
|
it's removed from the first.</p>
|
|||
|
|
<p>When a Drag is first rendered, if it's position cannot be determined
|
|||
|
|
from the DragGroup it is in, the position of its upper-left corner
|
|||
|
|
is computed using the standard layout algorithm. Once that position
|
|||
|
|
has been computed, the layout properties are ignored in favor of the
|
|||
|
|
position stored inside the Drag.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt><cite>d</cite></dt>
|
|||
|
|
<dd>If present, the child of this Drag. Drags use the child style
|
|||
|
|
in preference to this, if it's not None.</dd>
|
|||
|
|
<dt><cite>drag_name</cite></dt>
|
|||
|
|
<dd>If not None, the name of this draggable. This is available
|
|||
|
|
as the <cite>name</cite> property of draggable objects. If a Drag
|
|||
|
|
with the same name is or was in the DragGroup, the starting
|
|||
|
|
position of this Drag is taken from that Draggable.</dd>
|
|||
|
|
<dt><cite>draggable</cite></dt>
|
|||
|
|
<dd>If true, the Drag can be dragged around the screen with
|
|||
|
|
the mouse.</dd>
|
|||
|
|
<dt><cite>droppable</cite></dt>
|
|||
|
|
<dd>If true, other Drags can be dropped on this Drag.</dd>
|
|||
|
|
<dt><cite>drag_raise</cite></dt>
|
|||
|
|
<dd>If true, this Drag is raised to the top when it is dragged. If
|
|||
|
|
it is joined to other Drags, all joined drags are raised.</dd>
|
|||
|
|
<dt><cite>activated</cite></dt>
|
|||
|
|
<dd>A callback (or list of callbacks) that is called when the mouse
|
|||
|
|
is pressed down on the drag. It is called with one argument, a
|
|||
|
|
a list of Drags that are being dragged. The return value of this
|
|||
|
|
callback is ignored.</dd>
|
|||
|
|
<dt><cite>dragging</cite></dt>
|
|||
|
|
<dd>A callback (or list of callbacks) that is called when the Drag is being
|
|||
|
|
dragged. It is called with one argument, a list of Drags that are
|
|||
|
|
being dragged. If the callback returns a value other than None, that
|
|||
|
|
value is returned as the result of the interaction.</dd>
|
|||
|
|
<dt><cite>dragged</cite></dt>
|
|||
|
|
<dd>A callback (or list of callbacks) that is called when the Drag
|
|||
|
|
has been dragged. It is called with two arguments. The first is
|
|||
|
|
a list of Drags that are being dragged. The second is either
|
|||
|
|
a Drag that is being dropped onto, or None of a drop did not
|
|||
|
|
occur. If the callback returns a value other than None, that
|
|||
|
|
value is returned as the result of the interaction.</dd>
|
|||
|
|
<dt><cite>dropped</cite></dt>
|
|||
|
|
<dd><p class="first">A callback (or list of callbacks) that is called when this Drag
|
|||
|
|
is dropped onto. It is called with two arguments. The first
|
|||
|
|
is the Drag being dropped onto. The second is a list of Drags that
|
|||
|
|
are being dragged. If the callback returns a value other than None,
|
|||
|
|
that value is returned as the result of the interaction.</p>
|
|||
|
|
<p class="last">When a dragged and dropped callback are triggered for the same
|
|||
|
|
event, the dropped callback is only called if dragged returns
|
|||
|
|
None.</p>
|
|||
|
|
</dd>
|
|||
|
|
<dt><cite>clicked</cite></dt>
|
|||
|
|
<dd>A callback this is called, with no arguments, when the Drag is
|
|||
|
|
clicked without being moved. A droppable can also be focused
|
|||
|
|
and clicked. If the callback returns a value other than None,
|
|||
|
|
that value is returned as the result of the interaction.</dd>
|
|||
|
|
<dt><cite>alternate</cite></dt>
|
|||
|
|
<dd>An action that is run when the Drag is right-clicked (on the
|
|||
|
|
desktop) or long-pressed without moving (on mobile). It may
|
|||
|
|
be necessary to increase <a class="reference internal" href="config.html#var-config.longpress_duration"><code class="xref std std-var docutils literal notranslate"><span class="pre">config.longpress_duration</span></code></a> if
|
|||
|
|
this triggers to early on mobile platforms.</dd>
|
|||
|
|
<dt><cite>drag_handle</cite></dt>
|
|||
|
|
<dd>A (x, y, width, height) tuple, giving the position of the drag
|
|||
|
|
handle within the child. In this tuple, integers are considered
|
|||
|
|
to be a literal number of pixels, while floats are relative to
|
|||
|
|
the size of the child.</dd>
|
|||
|
|
<dt><cite>drag_joined</cite></dt>
|
|||
|
|
<dd>This is called with the current Drag as an argument. It's
|
|||
|
|
expected to return a list of [ (drag, x, y) ] tuples, giving
|
|||
|
|
the draggables to drag as a unit. <cite>x</cite> and <cite>y</cite> are the offsets
|
|||
|
|
of the drags relative to each other, they are not relative
|
|||
|
|
to the corner of this drag.</dd>
|
|||
|
|
<dt><cite>drag_offscreen</cite></dt>
|
|||
|
|
<dd>If true, this draggable can be moved offscreen. This can be
|
|||
|
|
dangerous to use with drag_joined or drags that can change
|
|||
|
|
size, as the drags can leave the screen entirely, with no
|
|||
|
|
way to get them back on the screen.</dd>
|
|||
|
|
<dt><cite>mouse_drop</cite></dt>
|
|||
|
|
<dd>If true, the drag is dropped on the first droppable under the cursor.
|
|||
|
|
If false, the default, the drag is dropped onto the droppable with
|
|||
|
|
the largest degree of overlap.</dd>
|
|||
|
|
<dt><cite>drop_allowable</cite></dt>
|
|||
|
|
<dd>A callback that is called to determine whether this drop allow
|
|||
|
|
the current drags dropped onto. It is called with two arguments.
|
|||
|
|
The first is the Drag which determines its sensitivity.
|
|||
|
|
The second is a list of Drags that are being dragged.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<p>Except for <cite>d</cite>, all of the parameters are available as fields (with
|
|||
|
|
the same name) on the Drag object. In addition, after the drag has
|
|||
|
|
been rendered, the following fields become available:</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt><cite>x</cite>, <cite>y</cite></dt>
|
|||
|
|
<dd>The position of the Drag relative to its parent, in pixels.</dd>
|
|||
|
|
<dt><cite>start_x</cite>, <cite>start_y</cite></dt>
|
|||
|
|
<dd>The drag start position of the Drag relative to its parent, in pixels.</dd>
|
|||
|
|
<dt><cite>w</cite>, <cite>h</cite></dt>
|
|||
|
|
<dd>The width and height of the Drag's child, in pixels.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="Drag.bottom">
|
|||
|
|
<code class="descname">bottom</code><span class="sig-paren">(</span><em>self</em><span class="sig-paren">)</span><a class="headerlink" href="#Drag.bottom" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Lowers this displayable to the bottom of its drag_group.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="Drag.set_child">
|
|||
|
|
<code class="descname">set_child</code><span class="sig-paren">(</span><em>d</em><span class="sig-paren">)</span><a class="headerlink" href="#Drag.set_child" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Changes the child of this drag to <cite>d</cite>.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="Drag.snap">
|
|||
|
|
<code class="descname">snap</code><span class="sig-paren">(</span><em>x</em>, <em>y</em>, <em>delay=0</em><span class="sig-paren">)</span><a class="headerlink" href="#Drag.snap" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Changes the position of the drag. If the drag is not showing,
|
|||
|
|
then the position change is instantaneous. Otherwise, the
|
|||
|
|
position change takes <cite>delay</cite> seconds, and is animated as a
|
|||
|
|
linear move.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="Drag.top">
|
|||
|
|
<code class="descname">top</code><span class="sig-paren">(</span><em>self</em><span class="sig-paren">)</span><a class="headerlink" href="#Drag.top" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Raises this displayable to the top of its drag_group.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="class">
|
|||
|
|
<dt id="DragGroup">
|
|||
|
|
<em class="property">class </em><code class="descname">DragGroup</code><span class="sig-paren">(</span><em>*children</em>, <em>**properties</em><span class="sig-paren">)</span><a class="headerlink" href="#DragGroup" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Represents a group of Drags. A Drag is limited to the boundary of
|
|||
|
|
its DragGroup. Dropping only works between Drags that are in the
|
|||
|
|
same DragGroup. Drags may only be raised when they are inside a
|
|||
|
|
DragGroup.</p>
|
|||
|
|
<p>A DragGroup is laid out like a <a class="reference internal" href="displayables.html#Fixed" title="Fixed"><code class="xref py py-func docutils literal notranslate"><span class="pre">Fixed()</span></code></a>.</p>
|
|||
|
|
<p>All positional parameters to the DragGroup constructor should be
|
|||
|
|
Drags, that are added to the DragGroup.</p>
|
|||
|
|
<dl class="docutils">
|
|||
|
|
<dt><cite>min_overlap</cite></dt>
|
|||
|
|
<dd>An integer which means the minimum number of pixels at the
|
|||
|
|
overlap for the drop to be allowed.</dd>
|
|||
|
|
</dl>
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="DragGroup.add">
|
|||
|
|
<code class="descname">add</code><span class="sig-paren">(</span><em>child</em><span class="sig-paren">)</span><a class="headerlink" href="#DragGroup.add" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Adds <cite>child</cite>, which must be a Drag, to this DragGroup.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="DragGroup.get_child_by_name">
|
|||
|
|
<code class="descname">get_child_by_name</code><span class="sig-paren">(</span><em>name</em><span class="sig-paren">)</span><a class="headerlink" href="#DragGroup.get_child_by_name" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Returns the first child of this DragGroup that has a drag_name
|
|||
|
|
of <cite>name</cite>.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
<dl class="method">
|
|||
|
|
<dt id="DragGroup.remove">
|
|||
|
|
<code class="descname">remove</code><span class="sig-paren">(</span><em>child</em><span class="sig-paren">)</span><a class="headerlink" href="#DragGroup.remove" title="Permalink to this definition"> link</a></dt>
|
|||
|
|
<dd><p>Removes <cite>child</cite> from this DragGroup.</p>
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</dd></dl>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="examples">
|
|||
|
|
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"> link</a></h2>
|
|||
|
|
<p>An example of a say screen that allows the user to choose the location
|
|||
|
|
of the window by dragging it around the screen.:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">say</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="na">drag_name</span> <span class="s2">"say"</span>
|
|||
|
|
<span class="na">yalign</span> <span class="mf">1.0</span>
|
|||
|
|
<span class="na">drag_handle</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="na">xalign</span> <span class="mf">0.5</span>
|
|||
|
|
|
|||
|
|
<span class="k">window</span> <span class="na">id</span> <span class="s2">"window"</span><span class="p">:</span>
|
|||
|
|
<span class="c1"># Ensure that the window is smaller than the screen.</span>
|
|||
|
|
<span class="na">xmaximum</span> <span class="mi">600</span>
|
|||
|
|
|
|||
|
|
<span class="k">has</span> <span class="k">vbox</span>
|
|||
|
|
|
|||
|
|
<span class="k">if</span> <span class="n">who</span><span class="p">:</span>
|
|||
|
|
<span class="k">text</span> <span class="n">who</span> <span class="na">id</span> <span class="s2">"who"</span>
|
|||
|
|
|
|||
|
|
<span class="k">text</span> <span class="n">what</span> <span class="na">id</span> <span class="s2">"what"</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>Here's a more complicated example, one that shows how dragging can be
|
|||
|
|
used to influence gameplay. It shows how dragging can be used to
|
|||
|
|
send a character to a location:</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">init</span> <span class="k">python</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="k">def</span> <span class="nf">detective_dragged</span><span class="p">(</span><span class="n">drags</span><span class="p">,</span> <span class="n">drop</span><span class="p">):</span>
|
|||
|
|
|
|||
|
|
<span class="k">if</span> <span class="k">not</span> <span class="n">drop</span><span class="p">:</span>
|
|||
|
|
<span class="k">return</span>
|
|||
|
|
|
|||
|
|
<span class="n">store</span><span class="o">.</span><span class="n">detective</span> <span class="o">=</span> <span class="n">drags</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">.</span><span class="na">drag_name</span>
|
|||
|
|
<span class="n">store</span><span class="o">.</span><span class="n">city</span> <span class="o">=</span> <span class="n">drop</span><span class="o">.</span><span class="na">drag_name</span>
|
|||
|
|
|
|||
|
|
<span class="k">return</span> <span class="kc">True</span>
|
|||
|
|
|
|||
|
|
<span class="k">screen</span> <span class="n">send_detective_screen</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="c1"># A map as background.</span>
|
|||
|
|
<span class="k">add</span> <span class="s2">"europe.jpg"</span>
|
|||
|
|
|
|||
|
|
<span class="c1"># A drag group ensures that the detectives and the cities can be</span>
|
|||
|
|
<span class="c1"># dragged to each other.</span>
|
|||
|
|
<span class="k">draggroup</span><span class="p">:</span>
|
|||
|
|
|
|||
|
|
<span class="c1"># Our detectives.</span>
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="na">drag_name</span> <span class="s2">"Ivy"</span>
|
|||
|
|
<span class="na">child</span> <span class="s2">"ivy.png"</span>
|
|||
|
|
<span class="na">droppable</span> <span class="kc">False</span>
|
|||
|
|
<span class="na">dragged</span> <span class="n">detective_dragged</span>
|
|||
|
|
<span class="na">xpos</span> <span class="mi">100</span> <span class="na">ypos</span> <span class="mi">100</span>
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="na">drag_name</span> <span class="s2">"Zack"</span>
|
|||
|
|
<span class="na">child</span> <span class="s2">"zack.png"</span>
|
|||
|
|
<span class="na">droppable</span> <span class="kc">False</span>
|
|||
|
|
<span class="na">dragged</span> <span class="n">detective_dragged</span>
|
|||
|
|
<span class="na">xpos</span> <span class="mi">150</span> <span class="na">ypos</span> <span class="mi">100</span>
|
|||
|
|
|
|||
|
|
<span class="c1"># The cities they can go to.</span>
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="na">drag_name</span> <span class="s2">"London"</span>
|
|||
|
|
<span class="na">child</span> <span class="s2">"london.png"</span>
|
|||
|
|
<span class="na">draggable</span> <span class="kc">False</span>
|
|||
|
|
<span class="na">xpos</span> <span class="mi">450</span> <span class="na">ypos</span> <span class="mi">140</span>
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="na">drag_name</span> <span class="s2">"Paris"</span>
|
|||
|
|
<span class="na">draggable</span> <span class="kc">False</span>
|
|||
|
|
<span class="na">child</span> <span class="s2">"paris.png"</span>
|
|||
|
|
<span class="na">xpos</span> <span class="mi">500</span> <span class="na">ypos</span> <span class="mi">280</span>
|
|||
|
|
|
|||
|
|
<span class="k">label</span> <span class="n">send_detective</span><span class="p">:</span>
|
|||
|
|
<span class="s2">"We need to investigate! Who should we send, and where should they go?"</span>
|
|||
|
|
|
|||
|
|
<span class="k">call</span> <span class="k">screen</span> <span class="n">send_detective_screen</span>
|
|||
|
|
|
|||
|
|
<span class="s2">"Okay, we'll send [detective] to [city]."</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
<p>More complicated systems take significant programming skill to get
|
|||
|
|
right. The <a class="reference external" href="http://www.renpy.org/wiki/renpy/Frameworks#Cardgame">Ren'Py cardgame framework</a>
|
|||
|
|
is both an example of how to use drag and drop in a complex
|
|||
|
|
system, and useful for making card games in its own right.</p>
|
|||
|
|
<p id="as-example">The <code class="docutils literal notranslate"><span class="pre">as</span></code> clause can be used to bind a drag to variable, which can then be
|
|||
|
|
used to call methods on the drag.</p>
|
|||
|
|
<div class="highlight-renpy notranslate"><div class="highlight"><pre><span></span><span class="k">screen</span> <span class="n">snap</span><span class="p">():</span>
|
|||
|
|
|
|||
|
|
<span class="k">drag</span><span class="p">:</span>
|
|||
|
|
<span class="k">as</span> <span class="n">carmen</span>
|
|||
|
|
<span class="na">draggable</span> <span class="kc">True</span>
|
|||
|
|
<span class="na">xpos</span> <span class="mi">100</span> <span class="na">ypos</span> <span class="mi">100</span>
|
|||
|
|
<span class="k">frame</span><span class="p">:</span>
|
|||
|
|
<span class="k">style</span> <span class="s2">"empty"</span>
|
|||
|
|
<span class="na">background</span> <span class="s2">"carmen.png"</span>
|
|||
|
|
<span class="na">xysize</span> <span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
|
|||
|
|
|
|||
|
|
<span class="k">vbox</span><span class="p">:</span>
|
|||
|
|
<span class="k">textbutton</span> <span class="s2">"London"</span> <span class="na">action</span> <span class="n">Function</span><span class="p">(</span><span class="n">carmen</span><span class="o">.</span><span class="n">snap</span><span class="p">,</span> <span class="mi">450</span><span class="p">,</span> <span class="mi">140</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">)</span>
|
|||
|
|
<span class="k">textbutton</span> <span class="s2">"Paris"</span> <span class="na">action</span> <span class="n">Function</span><span class="p">(</span><span class="n">carmen</span><span class="o">.</span><span class="n">snap</span><span class="p">,</span> <span class="mi">500</span><span class="p">,</span> <span class="mi">280</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">)</span>
|
|||
|
|
</pre></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container">
|
|||
|
|
<p class="pull-right">
|
|||
|
|
<a href="#">Back to top</a>
|
|||
|
|
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
© Copyright 2012-2022, Tom Rothamel.<br/>
|
|||
|
|
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.8.6.<br/>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|