recherche

Maison >interface Web >js tutoriel >Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

清浅
清浅original
2018-12-11 11:09:382510parcourir

L'événement glisser dans jQueryEasyUI peut être déplacé en y définissant un élément proxy, l'élément glisser peut être configuré pour glisser par rapport à l'axe x.y, et quand le glissement doit s'arrêter, etc.

L'easyui dans jQuery est un plug-in très simple à utiliser Bien qu'il soit simple et pratique à utiliser, ses fonctions sont en effet très puissantes. Aujourd'hui je vais vous présenter comment utiliser l'easyui. plug-in pour réaliser le glisser-placer de base. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde.

[Cours recommandé : Tutoriel jQueryEasyUI]

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Draggable (glisser)

Draggable est un plug-in dans easyui qui est utilisé pour implémenter des fonctions glisser-déposer. Grâce à lui, nous pouvons obtenir l'effet glisser-déposer sur les contrôles.

Il a les valeurs d'attribut suivantes :

tr>
Nom de l'attribut Signification
属性名 含义

proxy

 指拖动时要使用的代理元素，设置为clone时，克隆元素将被用作代理；如果指定一个函数，它必须返回一个 jQuery 对象。
revert 是一个boolean值，设置为 true时表示拖动结束后元素将返回它的开始位置。  （默认值为false）
cursor  拖动时的 css 光标，默认值为move    
deltaX  指的是拖动的元素相对于当前光标的 X 轴的位置，默认值为null   
deltaY   指的是拖动的元素相对于当前光标的 Y 轴位置，默认值为null  
handle  指启动可拖动元素的处理，默认值为null   
disabled 是一个boolean值，如果设置为 true，则停止可拖动，默认值为false    
edge   指能够在其中开始可拖动的拖动宽度，默认值为0   
axis  指定义拖动元素可在其上移动的轴，可用的值是 'v' 或 'h'，当设为 null，将会沿着 'v' 和 'h' 的方向移动
proxy		 fait référence à l'élément proxy à utiliser lors du déplacement. Lorsqu'il est défini sur clone, l'élément cloné sera utilisé comme proxy ; s'il s'agit d'une fonction est spécifié, il doit renvoyer un objet jQuery.
est une valeur booléenne, définie sur true signifie que l'élément reviendra à sa position de départ après avoir été déplacé. (La valeur par défaut est false)
curseur
deltaX Fait référence à la position de l'élément glissé par rapport à l'axe X du curseur actuel. La valeur par défaut est null
deltaY fait référence à la position sur l'axe Y de l'élément déplacé par rapport au curseur actuel. La valeur par défaut est null
fait référence au démarrage du traitement des éléments déplaçables, la valeur par défaut est null
désactivé est une valeur booléenne Si elle est définie sur true, le glissement cessera. La valeur par défaut est false
edge signifie que vous pouvez commencer à le faire glisser La largeur de déplacement du mouvement, la valeur par défaut est 0
axis fait référence à la définition de l'axe sur lequel l'élément de déplacement peut se déplacer. Les valeurs disponibles sont 'v. ' ou 'h', lorsqu'il est défini sur null, se déplacera dans la direction de 'v' et 'h'

Analyse de cas :

Activer le glisser et le placement de trois éléments div

Un plug-in indispensable pour les références externes

<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\default\easyui.css">
<link rel="stylesheet" type="text/css" href="D:\jquery-easyui-1.6.10\themes\icon.css">
<script src="D:\jquery-easyui-1.6.10\jquery.min.js"></script>
<script src="D:\jquery-easyui-1.6.10\jquery.easyui.min.js"></script>

Code HTML et CSS

<style>
	div{
	width:100px;
	height: 100px;
	margin-bottom:5px;
	text-align: center;
	 line-height: 100px;

	}
	#box1{background: pink;}
	#box2{background: skyblue;}
	#box3{background: yellow;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>

Rendu :

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Définir l'élément box1 comme déplaçable

 $(&#39;#box1&#39;).draggable();

Rendu :

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Pour box2, créez une valeur de clonage pour le proxy de l'élément d'origine afin qu'il puisse faire glisser l'effet 

$(&#39;#box2&#39;).draggable({
        proxy:&#39;clone&#39;
    });

Image :

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Dans la troisième case, nous définissons l'élément pour qu'il soit déplacé uniquement sur l'axe v : 

$("#box3").draggable({
            axis: &#39;v&#39;
  })

Rendu :

Comment utiliser les événements glisser-déposer dans jQueryEasyUI

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des questions et réponses courantes des entretiens JavaScripArticle suivant：Résumé des questions et réponses courantes des entretiens JavaScrip

Articles Liés

Voir plus