# j-Movable

> Il componente agisce come un elemento tracciabile e sostiene il movimento tra gli altri. Ogni elemento secondo il selettore deve avere definito l'attribuzione tracciable='true'.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 46ef022e186ff3b4fac51837e972503da524b5f38cf33b02f5d7e7715750ec95
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Il componente gestisce un elemento simile al `draggable` e supporta il movimento tra di loro. Ogni elemento secondo il selettore deve avere l'attribuzione definita del `draggable="true"`.


__Configurazione__:

- `selector {String}` JQuery selettore per guardare
- `exec {String}` Un percorso verso il metodo che verrà eseguito se l'utente sposta un elemento
- Gli eventi di drenaggio e caduta di `global {Boolean}` saranno collegati a `document` (default: `false`)
- Selettore `parent {String}` per trovare l'elemento dove saranno legati i trapianti e gli invetti (default: elemento corrente)
- `move {Boolean}` consente di ordinare automaticamente gli elementi (default: `true`)
- `container {String}`: un selettore per la ricerca del contenitore principale
- __NEW__ `check {Function(el)}` opzionale, una funzione per la verifica della tracciabilità (è necessario restituire `true` o `false`)

__Esempio di metodo `Exec`__:

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

__Buono sapere__:

- `path` esegue il `CHANGE()`

Utilizzare con `<ui-component name="movable">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```