# j-Movable

> Składnik obsługuje podobny element przyciągający i wspiera ruch między sobą.Każdy element według selektora musi mieć określony atrybut przyciągania = "prawdziwy".

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 40408adab03fdf6aa681cea456640193f025d0e8ab891c25fc78e33df14305d4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Składnik obsługuje podobny element `draggable` i wspiera ruch między sobą. Każdy element według selektora musi mieć określony atrybut `draggable="true"`.


__Konfiguracja__:

- `selector {String}` jQuery wybór do oglądania
- `exec {String}` - droga do metody, która zostanie wykonana, jeśli użytkownik porusza element
- Wydarzenia wyciągania i spadku `global {Boolean}` będą wiążące się z `document` (default: `false`)
- Wybór `parent {String}` w celu znalezienia elementu, w którym zostaną połączone obudowy drgawcze i spadek (default: aktualny element)
- `move {Boolean}` umożliwia automatyczne ponowne zamówienie elementów (default: `true`)
- `container {String}` - wybór głównego pojemnika
- __NEW__ `check {Function(el)}` opcjonalny, funkcja sprawdzająca przyciąganie (musi być zwrócona do `true` lub `false`)

__Przykłady metody `Exec`__:

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

__Dobrze wiedzieć__:

- `path` wykonuje `CHANGE()`

Użyj go z `<ui-component name="movable">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>
```