j-Movable

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant gère un élément draggable similaire et prend en charge les mouvements entre eux. Chaque élément selon le sélecteur doit avoir défini l'attribut draggable="true".

Configuration :

Sélecteur jQuery selector {String} pour regarder
exec {String} Un chemin vers la méthode qui sera exécutée si l'utilisateur déplace l'élément
Les événements glisser-déposer global {Boolean} seront liés à document (par défaut : false)
Sélecteur parent {String} pour trouver l'élément où seront liés les enveloppes glisser-déposer (par défaut : élément actuel)
move {Boolean} permet la réorganisation automatique des éléments (par défaut : true)
container {String} un sélecteur de recherche du conteneur principal
NOUVEAU check {Function(el)} en option, une fonction de vérification de déplaçabilité (elle doit renvoyer true ou false)

Exemple de méthode Exec :

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

Bon à savoir :

path exécute CHANGE()

Utilisez-le avec <ui-component name="movable">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>