drop

An article by Gaspard Bucher

Set an element as accepting dragged nodes.

  1. action
  2. ajax
    1. add
    2. ajax?
    3. block
    4. cancel
    5. drop
    6. edit
    7. js
    8. start_node
    9. swap
    10. toggle
  3. API
  4. classes
  5. common attributes
  6. conditions
  7. context
  8. dates
  9. display
  10. forms
  11. i18n
  12. meta
  13. SQLiss
  14. urls

Set an element as accepting dragged nodes.

  • set [parent/attribute/relation]
  • hover class set when a dragged element hovers (default: drop_hover)
  • any attr set this attribute to the given value
  • change (receiver, dropped, params) which node is changed or only change params
  • done (remove)
see draggable, each, form, improved 'drop' behaviour, remote update
<div do='drop' set='icon_for'><!-- set icon on drop -->
</div>

<div do='drop' set='parent'><!-- dropped element will become a child -->
<!-- set 'log_at' to context date on drop -->
<div do='drop' set='log_at' value='current_date' hover='flashy'/>

<!-- copy title to dropped node -->
<div do='drop' v_title='[v_title]'/>

<!-- change assignation (relation) and log change
with a comment  -->
<div do='drop' assigned_to_id='[id]' m_title='changed assignation' m_text='[c_fullname]'>
  <ul do='assigned_tasks where custom_a is null'>
    <li do='each' do='link'/>
  </ul>
</div>

<!-- drop an image to set icon -->
<div do='drop' set='icon' change='receiver'><r:icon where='1' do='unlink' do='img' mode='pv'/></div>

<!-- drop an image and asks for validation with comment -->
<div do='drop' change='params' d='[id]' do='if' test='param:d'>
  <r:node where='id eq param:d' in='site'>
    Change icon to <r:img mode='tiny'/> ?
    <r:main store='icon' do='form'>
      <r:input type='hidden' name='icon_id' set_value='[icon.id]'/>
      <r:input type='hidden' name='m_title' set_value='icon changed to [icon.name]'/>
      <r:textarea name='m_text'/>
      <input type='submit'/>
    </r:main>
  </r:node>
  <r:else>
    <r:icon do='img' mode='pv'/>
    please drop a node to change the icon
  </r:else>
</div>

Dropping nodes modifies the dropped node by default (not the receiving node).

Automatically sets the default html class to “drop”.

You can use drop areas to display a node’s content without changing any attributes with the special “replace id with other id” syntax.

<r:drop id='[id]'>...</r:drop>

You can also alter the parameters used when rendering the ‘drop’ block. This technique can be used to render conditional forms or as a way to filter content by drag&drop. See form for another example where the modified node is not the receiver as in the example above.

<r:drop change='params' f='[name]'>...</r:drop>