HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Drag Container
A module for creating a container with draggable elements inside that can be ordered as applicable, allowing custom page layouts.
Examples
Draggable
Draggable
Undraggable
Draggable Control

HTML

<div id="container" class="hx-group hx-horizontal">
  <div data-id="green" class="hx-drag-element hx-section hx-pad hx-background-positive">
    Draggable
  </div>
  <div data-id="yellow" class="hx-drag-element hx-section hx-pad hx-background-warning">
    Draggable
  </div>
  <div data-id="red" class="hx-section hx-pad hx-background-negative">
    Undraggable
  </div>
  <div data-id="purple" class="hx-drag-element hx-section hx-pad hx-background-info">
    <span class="hx-drag-control"><i class="fa fa-arrows"></i></span> Draggable Control
  </div>
</div>
<br>
<button id="resetOrder" class="hx-btn">Reset Order</button>
<button id="getOrder" class="hx-btn hx-positive">Get Order</button>

JavaScript

var dragContainer = new hx.DragContainer('#container')

hx.select('#resetOrder').on('click', function() {
  dragContainer.order(undefined)
})
hx.select('#getOrder').on('click', function() {
  hx.notify.info('The order is: ' + dragContainer.order().join(', '))
})
Api
Change Log
Prototypes
hx.DragContainerextendsEventEmitter
A prototype for creating a container with draggable elements inside.
Constructors
hx.DragContainerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The selector for the drag container
options
The options to use when creating the drag container
Properties
lookupnodeHTMLElementString
The lookup function to use to get the ids when ordering the elements.
Default: 
function (node) {
  return hx.select(node).attr('data-id')
}
Arguments
nodeHTMLElement
The draggable node. Will always be a direct child of the drag container.
Returns
String
The unique id for the current node.
orderArray
The array of ids to use to order the elements.
resizeOnDragBoolean
Whether the element being dragged should be resized to fit into the space currently selected.
Default: false
Events
dragHTMLElement
The event emitted whilst an element is being dragged. The data with the event is the element that is being dragged.
dragendHtTMLElement
The event emitted at the end of an element being dragged. The data with the event is the element that is being dragged.
dragstartHtTMLElement
The event emitted at the start of an element being dragged. The data with the event is the element that is being dragged.
Methods
lookupFunction
The method for getting the currently set lookup function.
Returns
function
The lookup function currently set.
lookupfnFunctionDragContainer
The method for gsetting the currently set lookup function.
Arguments
fnnodeHTMLElementString
The lookup function to set. It should return a unique id for each node in the drag container.
Arguments
nodeHTMLElement
The draggable node. Will always be a direct child of the drag container.
Returns
String
The unique id for the current node.
Returns
DragContainer
This DragContainer
orderArray[String]
The method for getting the current order of the nodes.
Returns
Array[String]
An array of id's as returned from the lookup function.
orderorderArray[String]DragContainer
The method for setting the current order of the nodes.
Arguments
orderArray[String]
The array of id's to order the nodes to. If undefined is passed in, the order is set to the order the nodes were in when the drag container was created.
Returns
DragContainer
This DragContainer
setupDragContainer
The method used to set up the drag control listeners for the container. This should be called whenever an element is added to the drag container that has a drag control inside it.
Returns
DragContainer
This DragContainer
Functions
hx.dragContaineroptionsObjectSelection
Creates a new DragContainer set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing DragContainer
Returns
Selection
A selection containing an element with an DragContainer initialised on it
Classes
hx-drag-container
The class applied to the drag container.
Classes
hx-drag-element
The class to apply to elements that should be draggable
Classes
hx-drag-control
The class to give to the drag control for a draggable element