# j-Movable

> The component handles similar draggable element and supports movement between each other. Each element according to the selector must have defined draggable='true' attribute.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 04cdb48c16d006fc19c07be7c964da4009c3ca58d2704497ce49443c1634081f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

The component handles similar `draggable` element and supports movement between each other. Each element according to the selector must have defined `draggable="true"` attribute.


__Configuration__:

- `selector {String}` jQuery selector for watching
- `exec {String}` A path to method which will be executed if the user moves element
- `global {Boolean}` drag & drop events will be binded to `document` (default: `false`)
- `parent {String}` selector for finding of element where will be binded drag & drop envets (default: current element)
- `move {Boolean}` enables auto re-ordering elements (default: `true`)
- `container {String}` a selector for finding of the main container
- __NEW__ `check {Function(el)}` optional, a function for checking of draggability (it must return `true` or `false`)

__Example of `Exec` method__:

```javascript
function exec_method(list, dragged, target) {
	// @list jQuery list
}
```

__Good to know__:

- `path` performs `CHANGE()`

Use it with `<ui-component name="movable">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="movable" config="selector:.dragme;exec:moved">
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#F0F0F0;text-align:center;position:relative;display:inline-block;margin:10px">A</div>
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#E0E0E0;text-align:center;position:relative;display:inline-block;margin:10px">B</div>
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#D0D0D0;text-align:center;position:relative;display:inline-block;margin:10px">C</div>
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#C0C0C0;text-align:center;position:relative;display:inline-block;margin:10px">D</div>
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#B0B0B0;text-align:center;position:relative;display:inline-block;margin:10px">E</div>
	<div class="dragme" draggable="true" style="width:50px;line-height:50px;background-color:#A0A0A0;text-align:center;position:relative;display:inline-block;margin:10px">F</div>
</ui-component>

<script>
	function moved(list) {
		console.log(list);
	}
</script>
```