# j-Movable

> Komponenten hanterar liknande dragbara element och stöder rörelse mellan varandra.Varje element enligt selektorn måste ha definierat dragbara = 'true' attribut.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: 111e0f743322eadcb52b0c3302b13428bb143a7c592f60b3a39d5bc03e644039
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Komponenten hanterar liknande `draggable`-element och stöder rörelse mellan varandra. Varje element enligt selektorn måste ha definierad `draggable="true"` attribut.


__Konfigurera__:

- `selector {String}` jQuery för att se
- `exec {String}` En väg till metoden som kommer att utföras om användaren flyttar elementet
- `global {Boolean}` drag & drop händelser kommer att kopplas till `document` (default: `false`)
- `parent {String}`-selektor för att hitta elementet där drag & drop-vetsar kommer att bindas (default: aktuell element)
- `move {Boolean}` möjliggör automatisk ombeställning (default: `true`)
- `container {String}` en selektor för att hitta huvudkontakten
- __NEW__ `check {Function(el)}` valfritt, en funktion för att kontrollera dragbarhet (det måste returnera `true` eller `false`)

__Exempel på `Exec`__:

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

__Bra att veta__:

- `path` utför `CHANGE()`

Använd den med `<ui-component name="movable">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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