# j-Movable

> O componente funciona como um elemento desligável e suporta o movimento entre si. Cada elemento deve ter definido o atributo desligable='true'.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 4c551d52421b859da30291083ae2696eef0ec2bc02c8ee4ef5dbe54fc6609406
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

O componente gerencia um elemento semelhante ao `draggable` e suporta o movimento entre si. Cada elemento de acordo com o seletor deve ter definido o atributo `draggable="true"`.


__Configuração__:

- `selector {String}` jQuery selecionador para assistir
- `exec {String}` Um caminho para o método que será executado se o usuário mover o elemento
- Os eventos de deslocamento e deslocação do `global {Boolean}` serão vinculados ao `document` (default: `false`)
- Seletor `parent {String}` para encontrar o elemento em que serão ligados os envelhecimentos de tração e queda (default: elemento atual)
- `move {Boolean}` permite a reordenação automática dos elementos (default: `true`)
- `container {String}` um seletor para encontrar o contenedor principal
- __NEW__ `check {Function(el)}` opcional, uma função para verificar a traçabilidade (deve retornar `true` ou `false`)

__Exemplo do método `Exec`__:

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

__Bom para saber__:

- `path` Apresentação `CHANGE()`

Use-o com `<ui-component name="movable">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

```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>
```