Red de conocimiento informático - Conocimiento informático - Cómo activar eventos de clic en nodos del árbol jquery.nestable

Cómo activar eventos de clic en nodos del árbol jquery.nestable

Desde el código fuente, el evento de clic vinculado al nodo del árbol se activará porque primero se activa el evento interno onmousedown y luego se elimina el nodo DOM original llamando al método dragStart, lo que resulta en El clic el evento no se puede activar;

Sin modificar el código fuente, hay dos opciones:

1 Reemplazar el evento de clic con el evento de mousedown

2.

2. Al analizar el método onStartEvent en el código fuente, coloque un botón en el nodo del árbol para separar el "inicio de arrastrar y soltar" y el "evento de clic" del nodo del árbol (tenga en cuenta que aquí El botón necesita para tener un estilo diferente al botón plegable que viene con encajable)

Por ejemplo.

:lt;!DOCTYPE?htmlgt;

lt;html?lang="es"gt;

lt;headgt;

lt;meta?name= "author"?content="sleest"gt;

lt;meta?name="description"?content="nestable?example?for?item?click,?2017/08/23"gt;

lt;titlelt;Documentlt;/titlegt;

lt;meta?charset="utf-8"gt;

lt;stylegt;

.dd?{

posición: ?relativa;

pantalla: ?bloque;

estilo de lista: ?ninguno;

altura-línea:?1.5;

}

.dd-list?{

display:?bloque;

mostrar: ?relativo;

posición: ?relativo;

relleno: ?0; }

.dd-list?{

relleno-izquierda:?

.dd-empty,

.dd-placeholder? {

display:?bloque;

posición:?relativa;

altura-min:?20px;

altura-línea: ?1.5;

}

.dd-handle?{

pantalla:?bloque;

altura:?30px; p>

margen:?5px?

relleno:?5px?10px;

borde:?1px?solid?#ccc;

fondo: ?#fff;

tamaño de caja:?border-box;

-moz-box-tamaño:?border-box;

}

.dd-handle:hover?{

color:?#2ea8e5;

}

/*?Tenga en cuenta que esto es solo para nesttable ¿Diseñaste tu propio botón de colapso?*/

.dd-itemgt button[data-action]?{

display:?block;

posición: ?relativa;

cursor: ?puntero;

flotador: ?izquierda;

ancho: ?25px; ?20px;?

margen:?5px?0;

relleno:?0;

text-indent:?100;

espacio en blanco:?nowrap;

desbordamiento:?oculto;

borde:?0;

fondo:?transparente;

>font-size:?12px;

line-height:?1;

}

/*? Tenga en cuenta que aquí solo se establece el estilo nesttable de botón contraer? */

.dd-itemgt; botón[datos-acción]: antes?{

contenido:? ';

pantalla:?bloque;

p>

posición:?absoluta;

ancho:?100;

text-align:?centro;

texto- sangría:?0;

}

.dd-itemgt; botón[data-action="collapse"]: ¿antes?{

contenido:?- ';

}

.dd-placeholder,

.dd-empty?{

margen:?5px?0;

relleno: ?0;

altura mínima: ?30px;

fondo: ?#f2fbff;

borde: ?1px? ¿discontinuo?#b6bcbf;

tamaño de caja:?border-box;

-moz-box-sizing:?border-box;

}

.dd- ¿vacío?{

borde:?1px?dash?#bbb;

}

.dd-dragel?{

posición:?absoluta;

eventos-puntero:?ninguno;

índice z:?9999;

}

.dd-dragelgt;.dd-item?.dd-handle?px?6px?0?rgba(0,?0,?0,?0,?.1);

. sombra de caja:? 2px?4px?6px??rgba(0,?0,?0,?.1);

}

lt;/stylegt;

lt ;/headgt;

lt;bodygt;

lt;div?class="dd"gt;

lt;ol?clase ="dd-list " gt;

lt;li?class="dd-item"?data-id="1"gt;

lt;div?class=" dd-handle"gt ;Artículo?lt;/divgt;

lt;Button?id="btn-demo"?style="posición:?absolute;arriba:?0;derecha:?0; "gt;A? buttonlt;/buttongt;

lt;/ligt;

lt;li?class="dd-item"?data- id="2"gt;

lt;div?class="dd-handle"gt;¿Artículo?

lt;/divgt;

lt;/ligt;

lt ;li?class="dd-item"?data-id="3"gt;

lt;div?class="dd-handle"gt;¿Artículo?

lt;ol?class="dd-list"gt;

lt;li?class="dd-item"?data-id="4"gt;

lt; p>

lt;div?class="dd-handle"gt;¿Artículo?

lt;/divgt;

lt;/ligt;

lt; p>

lt;li?class="dd-item"?data-id="5"gt;

lt;div ?class="dd-handle"gt;Artículo?5lt; /divgt;

lt;/ligt;

lt;/olgt;

lt; /ligt;

lt;/olgt ;

lt;/divgt;

lt;script?src="/jquery/3.2.1/jquery. slim.js"gt;lt;/scriptgt;

lt;script?src="/Nestable/2012-10-15/jquery.someEvent(evento){

console. log(this, event.type);

}

$('.dd').nestable();

$(' body').on('mousedown', ? .dd- item',?someEvent);

$('body').on('click',?' #btn-demo',? algúnEvento);

lt;/scriptgt ;

lt;/bodygt;

lt;/htmlgt;

Resultado: