{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:47:25Z","object_id":{"id":1303,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_wires","title":"mod_wires","uri":"https:\/\/zotonic.com\/id\/1303"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"references":{"objects":[{"created":"2020-05-30T05:47:25Z","object_id":{"id":1390,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_droppable","title":"droppable","uri":"https:\/\/zotonic.com\/id\/1390"},"seq":1000000},{"created":"2020-05-30T05:47:25Z","object_id":{"id":1279,"is_a":["text","documentation"],"name":"doc_glossary","title":"Glossary","uri":"https:\/\/zotonic.com\/id\/1279"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-09-30T08:39:47Z","object_id":{"id":1390,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_droppable","title":"droppable","uri":"https:\/\/zotonic.com\/id\/1390"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2020-05-30T05:47:25Z","object_id":{"id":1390,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_droppable","title":"droppable","uri":"https:\/\/zotonic.com\/id\/1390"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-09-09T13:48:07Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":3},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2624,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_wire_action","title":"Wire action","uri":"https:\/\/zotonic.com\/id\/2624"},"seq":5},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":6}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1389,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1389"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_draggable","page_url":{"en":"https:\/\/zotonic.com\/docs\/1389\/draggable","x-default":"https:\/\/zotonic.com\/docs\/1389\/draggable"},"preview_url":null,"resource":{"version":4024,"pivot_location_lat":null,"title":"draggable","is_authoritative":true,"body":"

Mark a html element as draggable.<\/p>\n

Use this tag together with scomp#droppable<\/code><\/a> to implement drag & drop. Elements that are marked as\ndraggable can be dropped on elements marked as droppable. Drag & drop generates dragdrop events that are sent to the\ncontroller<\/a> or the delegate<\/a>.<\/p>\n

For example:<\/p>\n

<div id="drag1">Drag me<\/div>\n{% draggable id="drag1" tag="drag-one" %}\n<\/code><\/pre>\n
Now the div with id “drag1” can be dragged. When it is dropped then event\/2<\/code> of the controller or delegate Erlang\nmodule is called signaling the drag (and also the drop to the module receiving the droppable events):<\/p>\n
event({drag, Drag, Drop}, Context).\n<\/code><\/pre>\n
Where both Drag and Drop are #dragdrop<\/code> records:<\/p>\n
-record(dragdrop, {tag, delegate, id}).\n<\/code><\/pre>\n
The draggable tag accepts the following arguments:<\/p>\n
Argument<\/th>Description<\/th>Example<\/th><\/tr><\/thead>
id<\/code><\/td>The id of the element that becomes draggable.<\/td>id=”drag1”<\/code><\/td><\/tr>
tag<\/code><\/td>The tag of the draggable that is sent as part of the drag and drop events. This can be any value, including a tuple.<\/td>tag={subject_list id=42 changed=false}<\/code><\/td><\/tr>
clone<\/code><\/td>Clone the element when dragging or drag the element itself. Defaults to false.<\/td>clone=true<\/code><\/td><\/tr>
revert<\/code><\/td>When the element has to revert to its starting position. Defaults to “invalid”, i.e. when the drop was above an invalid position. Other options are true, false and “valid”.<\/td>revert=false<\/code><\/td><\/tr>
axis<\/code><\/td>Constrain the drag movement to either the x or y direction. Normally the drag is not constrained. Acceptable values are “x” or “y” axis=”x”<\/td><\/td><\/tr>
handle<\/code><\/td>The css selector that is the handle to drag with. Defaults to the whole element.<\/td>handle=”handleclass”<\/code><\/td><\/tr>
group<\/code><\/td>The name of this drag group, for use in the droppable element’s “accept” argument. Multiple groups are allowed.<\/td>group=”edges”<\/code><\/td><\/tr>
opacity<\/code><\/td>Change the opacity while dragging. Defaults to “0.8”.<\/td>opacity=”0.5”<\/code><\/td><\/tr>
delegate<\/code><\/td>The Erlang module that will receive the drag event after a successful drop.<\/td><\/td><\/tr><\/tbody><\/table>","slug":"draggable","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"13b470c30c718a95f766ff3cadb6d2b941f747a2c2fdea066fd682906e9bf17a","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_draggable.erl","publication_start":"2023-06-24T08:17:44Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_draggable.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_draggable","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:20Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_wires","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"9a47e9e96daf9836022613e06688c9984079ae95\n","erlang_module":"scomp_wires_draggable","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-13T09:39:31Z","title_slug":"draggable"},"uri":"https:\/\/zotonic.com\/id\/1389","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1389"}},"status":"ok"}