Complemento básico de jQuery EasyUI -Draggable Arrastrable
Complemento de jQuery EasyUI
Reescriba los defaults predeterminados mediante $.fn.draggable.defaults.
Uso
Cree elementos arrastrables (draggable) mediante marcado.
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
Cree elementos arrastrables (draggable) usando javascript.
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
Propiedades
| Nombre | Tipo | Descripción | Valor predeterminado |
|---|---|---|---|
| proxy | string,function | El elemento proxy que se usará al arrastrar; cuando se establece en 'clone', el elemento clonado se utilizará como proxy. Si se especifica una función, debe devolver un objeto jQuery. El siguiente ejemplo demuestra cómo crear un objeto proxy simple.
$('.dragitem').draggable({
proxy: function(source){
var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
p.html($(source).html()).appendTo('body');
return p;
}
});
|
null |
| revert | boolean | Si se establece en true, el elemento volverá a su posición inicial después de que termine el arrastre. | false |
| cursor | string | El cursor CSS durante el arrastre. | move |
| deltaX | number | La posición en el eje X del elemento arrastrado en relación con el cursor actual. | null |
| deltaY | number | La posición en el eje Y del elemento arrastrado en relación con el cursor actual. | null |
| handle | selector | El controlador (handle) que inicia el arrastre (draggable). | null |
| disabled | boolean | Si se establece en true, detiene el arrastre (draggable). | false |
| edge | number | La distancia de arrastre necesaria para iniciar el elemento arrastrable (draggable). | 0 |
| axis | string | Define el eje sobre el que se puede mover el elemento arrastrado; los valores disponibles son 'v' o 'h'. Cuando se establece en null, se moverá en las direcciones 'v' y 'h'. | null |
Eventos
| Nombre | Parámetros | Descripción |
|---|---|---|
| onBeforeDrag | e | Se activa antes del arrastre; devolver false cancela el arrastre. |
| onStartDrag | e | Se activa cuando el objeto de destino comienza a arrastrarse. |
| onDrag | e | Se activa durante el arrastre. Devolver false impedirá que se realice el arrastre real. |
| onStopDrag | e | Se activa cuando se detiene el arrastre. |
Métodos
| Nombre | Parámetros | Descripción |
|---|---|---|
| options | none | Devuelve la propiedad de opciones (options). |
| proxy | none | Si se ha establecido la propiedad proxy, devuelve el proxy de arrastre. |
| enable | none | Habilita la acción de arrastre. |
| disable | none | Deshabilita la acción de arrastre. |
Complementos de jQuery EasyUI Otras extensiones