Fork me on GitHub

drop

An article by Gaspard Bucher

Set an element as accepting dragged nodes.

Set an element as accepting dragged nodes.

  • set [parent/attribute/relation]
  • hover class set when a dragged element hovers (default: drop_hover)
  • some_attr set this attribute to the given value
  • change (receiver, dropped, params) which node is changed or only change params
  • done (remove)

<div do='drop' set='parent'>
  <!-- dropped element will become a child -->
</div>

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

Automatically sets the default html class to “drop”.



<!-- 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' title='#{title}'/>

<!-- change a relation link 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>

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>