DragAction attributes are activated on DOMContentLoaded
event. JS initialization can be used
as alternative to handle dynamic HTML elements.
The coral-dragaction
attribute adds draggable functionalities to the corresponding HTML element.
You can drag me around
Show Markup
<span coral-dragaction>
You can drag me around
</span>
The coral-dragaction-handle
attribute allows dragging only by dragging the specified handle.
You can only drag me using the handle
Show Markup
<span coral-dragaction coral-dragaction-handle="#handle">
You can only drag me using the <span id="handle"><b>handle</b></span>
</span>
The coral-dragaction-dropzone
attribute is used to indicate possible dropzones making it possible
to build drag-and-drop enabled interfaces in conjunction with DragAction
events.
You can drop me on #dropzone
I'm #dropzone
Show Markup
<span id="dragaction" coral-dragaction coral-dragaction-dropzone="#dropzone">
You can drop me on #dropzone
</span>
<div id="dropzone" style="height:200px;width:200px;background: #eee;">
I'm #dropzone
</div>
By supplying coral-dragaction-axis
and setting it to either horizontal
or vertical
,
it is possible to restrict the drag'n'drop to a single axis.
You can drag me on the horizontal axis only
Show Markup
<span coral-dragaction coral-dragaction-axis='horizontal'>
You can drag me on the horizontal axis only
</span>
coral-dragaction-scroll
attribute will scroll the container when the draggable is moved beyond the viewport
You can drag me to the document's body edges and beyond !
Show Markup
<span coral-dragaction coral-dragaction-scroll>
You can drag me to the document's body edges and beyond !
</span>
By setting coral-dragaction-containment
, the draggable element will be constrained to its container.
Show Markup
<div style="height:200px;width:200px;background: #eee;overflow:scroll;">
<div coral-dragaction coral-dragaction-containment style="width:50px;border:1px solid #999;">
You can not drag me out
</div>
</div>
The following examples demonstrate how to initialize coral-dragaction
using pure JavaScript.
Show Markup
<div style="height:200px;width:200px;background: #eee; overflow:scroll;">
<span id="dragactionJS">I can not be dragged out</span>
</div>
Finally we can initialize Coral.DragAction using only JavaScript.
document.addEventListener('DOMContentLoaded', function() {
var dragAction = new Coral.DragAction('#dragactionJS');
dragAction.containment = true;
});
DragActions create many additional events, which allow for more fine grained interactions and customizations.
Those events are triggered on the source of the drag'n'drop. See the detailed documentation below for more information.
The following code logs some of the supported events.
document.addEventListener('DOMContentLoaded', function() {
var console = $("#dragaction-log");
// Events generated on drag start
$('#dragaction')[0].addEventListener('coral-dragaction:dragstart', function (e) {
console.log('Start on position: [' + e.detail.pageX + ',' + e.detail.pageY + ']');
});
// Events generated on drag
$('#dragaction')[0].addEventListener('coral-dragaction:drag', function (e) {
console.log('Drag on position: [' + e.detail.pageX + ',' + e.detail.pageY + ']');
});
// Events generated on drag end
$('#dragaction')[0].addEventListener('coral-dragaction:dragend', function (e) {
console.log('End on position: [' + e.detail.pageX + ',' + e.detail.pageY + ']');
});
// Events generated on dragenter
$('#dragaction')[0].addEventListener('coral-dragaction:dragenter', function (e) {
console.log('Entered element with id: ' + e.detail.dropElement.id);
});
// Events generated on dragover
$('#dragaction')[0].addEventListener('coral-dragaction:dragover', function (e) {
console.log('Over element with id: ' + e.detail.dropElement.id);
});
// Events generated on dragleave
$('#dragaction')[0].addEventListener('coral-dragaction:dragleave', function (e) {
console.log('Left element with id: ' + e.detail.dropElement.id);
});
// Events generated on drop
$('#dragaction')[0].addEventListener('coral-dragaction:drop', function (e) {
console.log('Drop on element with id: ' + e.detail.dropElement.id);
e.detail.dropElement.style.background = 'beige';
});
});
In the simplest successful use case - dragging an element, moving it to the target area and dropping it
- the following events will occur:
coral-dragaction:dragstart
coral-dragaction:drag
coral-dragaction:dragenter
coral-dragaction:dragover
(multiple times)
coral-dragaction:drop
coral-dragaction:dragleave
coral-dragaction:dragend