j-Movable

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componentul se ocupă de un element similar draggable și susține mișcarea între ele. Fiecare element în funcție de selector trebuie să aibă atributul definit draggable="true".

Configurarea:

selector {String} jQuery selector pentru vizualizare
exec {String} Un drum către metoda care va fi executată dacă utilizatorul mișcă elementul
Evenimentele de retragere și descărcare global {Boolean} vor fi legate la document (default: false)
Selectorul parent {String} pentru a găsi elementul în care vor fi legate vaporii de tragere și scădere (default: elementul curent)
move {Boolean} permite reordinea automată a elementelor (default: true)
container {String} un selector pentru găsirea conținutului principal
NEW check {Function(el)} opțional, o funcție de verificare a tractibilității (trebuie să se întoarcă true sau false)

Exemplul metodei Exec:

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

bine să știi:

path îndeplinește CHANGE()

Utilizați-l cu <ui-component name="movable">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>