JQueryui Sortable No funciona cuando se usa componente personalizado con angular2 -- jquery-ui campo con angular campo con jquery-ui-sortable camp Relacionados El problema

JQueryUI Sortable not working when using custom component with Angular2


4
vote

problema

Español

Mi objetivo es poder permitir a los usuarios clasificar una lista de comandos. Estoy desarrollando mi solicitud utilizando Angular2 / TyperScript.

Así que miré a su alrededor para las bibliotecas basadas en Angular2 que pueden proporcionar una funcionalidad ordenable similar a JQueryui Sorrable, pero no pudo encontrar mucho.

Me encontré con este así que publica, lo que demostró cómo integrar jquery con angular2. Usando el PLUNK proporcionado en una de las soluciones para esta publicación, podría desarrollar un comportamiento sortable con angular2. Consulte este plunk . Esto está funcionando como se esperaba.

  @Component({   selector: 'my-app',   directives: [SMSortable],   providers: [],   template: `     <div>       <p>This is a list that can be sorted </p>       <div sm-sortable>         <p>Item 1</p>         <p>Item 2</p>         <p>Item 3</p>       </div>     </div>   ` }) export class App {   constructor() {     this.name = 'Angular2'   } }   

La idea era definir una directiva que aplicara el comportamiento ordenable al elemento nativo utilizando la API de JQueryui Sorrable (). Y luego use la directiva en la plantilla del componente.

  @Directive({   selector: "[sm-sortable]" }) export class SMSortable{      constructor(el: ElementRef) {         jQuery(el.nativeElement).sortable( {               start: function(event, ui) {                   console.log("Old position: " + ui.item.index());               },               stop: function(event, ui) {                   console.log("New position: " + ui.item.index());               }         });     } }   

Esto funciona bien cuando la plantilla del componente tiene todos los elementos nativos. Pero si mi plantilla tiene componentes angular2 personalizados, esto deja de funcionar.

Ver este no-trabajo PLUNK .

  @Component ({   selector: 'sm-cmd',   template: '<ng-content></ng-content>' }) export class SMCommand {  }  @Component({   selector: 'my-app',   directives: [SMSortable, SMCommand],   providers: [],   template: `     <div>       <p>This is a list that can be sorted </p>       <div sm-sortable>         <sm-cmd><p>Item 1</p></sm-cmd>         <sm-cmd><p>Item 2</p></sm-cmd>         <sm-cmd><p>Item 3</p></sm-cmd>       </div>     </div>   ` }) export class App {  }   

En este caso, puedo arrastrar el artículo, pero no puedo dejarlo caer. El artículo movido vuelve a su ubicación original. Añadí console.log para ver el índice de artículos en el evento de inicio y detener durante el tipo. El valor sigue siendo el mismo.

No puedo depurar más adelante en esto. ¿Alguien podría proporcionar alguna entrada en esto?

Original en ingles

My aim is to be able to allow users to sort a list of commands. I am developing my application using Angular2/Typescript.

So I looked around for angular2 based libraries that may provide sortable functionality similar to JQueryUI Sortable, But couldn't find much.

I came across this SO post, which demonstrated how to integrate JQuery with angular2. Using the plunk provided in one of the solutions for this post, I could develop a sortable behavior with angular2. See this plunk. This is working as expected.

@Component({   selector: 'my-app',   directives: [SMSortable],   providers: [],   template: `     <div>       <p>This is a list that can be sorted </p>       <div sm-sortable>         <p>Item 1</p>         <p>Item 2</p>         <p>Item 3</p>       </div>     </div>   ` }) export class App {   constructor() {     this.name = 'Angular2'   } } 

The idea was to define a directive which would apply the sortable behavior to the native element using JQueryUI sortable() API. And then use the directive in the component's template.

@Directive({   selector: "[sm-sortable]" }) export class SMSortable{      constructor(el: ElementRef) {         jQuery(el.nativeElement).sortable( {               start: function(event, ui) {                   console.log("Old position: " + ui.item.index());               },               stop: function(event, ui) {                   console.log("New position: " + ui.item.index());               }         });     } } 

This works well when the component's template has all native elements. But if my template has custom angular2 components, this stops working.

See this not-working plunk.

@Component ({   selector: 'sm-cmd',   template: '<ng-content></ng-content>' }) export class SMCommand {  }  @Component({   selector: 'my-app',   directives: [SMSortable, SMCommand],   providers: [],   template: `     <div>       <p>This is a list that can be sorted </p>       <div sm-sortable>         <sm-cmd><p>Item 1</p></sm-cmd>         <sm-cmd><p>Item 2</p></sm-cmd>         <sm-cmd><p>Item 3</p></sm-cmd>       </div>     </div>   ` }) export class App {  } 

In this case I am able to drag the item, but not able to drop it. The moved item reverts back to its original location. I added console.log to see the item index at start and stop event during sort. The value remains same.

I am not able to debug further on this. Could somebody provide some input on this?

        
         
         

Lista de respuestas

5
 
vote
vote
La mejor respuesta
 

El problema es realmente muy simple: ya que está usando el elemento personalizado sm-cmd El navegador no sabe qué modelo de renderizado se usa (bloque o en línea). De forma predeterminada se aplica en línea uno, lo que resulta en una colisión en términos de dimensiones del elemento, ya que tiene el nivel de bloque 9988777661 INTERIOR ENLINE sm-cmd . Así que el navegador no calcula las dimensiones del bloque correctamente.

Entonces, la solución es esta simple regla de CSS:

  sm-cmd {display: block;}   

También asegúrese de inicializar el complemento JQUERY en NgaFterViewInit Hook:

  @Directive({   selector: "[sm-sortable]" }) export class SMSortable{    constructor(private el: ElementRef) {}    ngAfterViewInit() {       jQuery(this.el.nativeElement).sortable( {             start: function(event, ui) {                 console.log("Old position: " + ui.item.index());             },             stop: function(event, ui) {                 console.log("New position: " + ui.item.index());             }       });   } }   

Demo: http://plnkr.co/edit/qed9wozxszlqt07qr51h ? P = Vista previa

 

The problem is actually very simple: since you are using custom element sm-cmd browser doesn't know what rendering-model to use (block or inline). By default it applies inline one, which results into a collision in terms of element dimensions, because you have block-level p inside inline sm-cmd. So the browser doesn't calculate block dimensions properly.

So the solution is this simple CSS rule:

sm-cmd {display: block;} 

Also make sure you initialize jQuery plugin in ngAfterViewInit hook:

@Directive({   selector: "[sm-sortable]" }) export class SMSortable{    constructor(private el: ElementRef) {}    ngAfterViewInit() {       jQuery(this.el.nativeElement).sortable( {             start: function(event, ui) {                 console.log("Old position: " + ui.item.index());             },             stop: function(event, ui) {                 console.log("New position: " + ui.item.index());             }       });   } } 

Demo: http://plnkr.co/edit/QEd9wozXSZlqT07qr51h?p=preview

 
 

Relacionados problema

0  Jquery Sortable: el artículo arrastrado aparece lejos fuera de la lista  ( Jquery sortable dragged item appears far outside of list ) 
Tengo una JQUERY SORTORABLE que ahora está funcionando: a excepción de un problema molesto. Cuando arrastre un elemento en la lista, el elemento arrastrad...

7  ¿Cómo obtengo la identificación del elemento ordenable?  ( How do i get the id of sortable element ) 
Estoy usando sortable y lo tengo y trabajando. Pero estoy tratando de salvar lo que está dentro de las listas. Digamos que tengo 3 listas: <ul id="top" c...

0  Problema Ordenable y Droppable con cambios 'ConnectTosortable' Cambios DOM Estructura  ( Sortable droppable issue with connecttosortable changes dom structure ) 
Estoy creando una herramienta para construir un constructor de formulario de clases usando jQuery UI .draggable , .sortable y .droppable FUNCIONES . La ...

0  JQUERY UI - MÓVIL: COMBINAR SOLIBLE CON EVENTO DE SWIPE  ( Jquery ui mobile combine sortable with swipe event ) 
Hola, estoy tratando de combinar en una división. Operación de jQuery-ui con Swipe Evente en dispositivo móvil. Desafortunadamente, cuando se encuentra un DIV...

1  JQUERY SORTORABLE LISTA - Deshabilitar el primer elemento  ( Jquery sortable list disable first element ) 
Tengo una lista ordenable, pero me gustaría deshabilitar el primer elemento, de modo que el campo de entrada no se pueda mover. Aquí está la lista: Route...

1  Los valores de la matriz no se están volviendo correctamente en jQuery sortable  ( Array values are not getting properly in jquery sortable ) 
He creado esto, consulte esto en pantalla completa y arrastre el elemento B de la última casilla a la primera caja [http://jsfiddle.net/stahg/] Hay cuatro...

5  ¿Se puede usar el evento Onblur con Jeditable y JQUERY UI SECORTable?  ( Can the onblur event be used with jeditable and jquery ui sortable ) 
Estoy haciendo uso de la jQuery ui interacción ordenable y jeditable . La idea es que un usuario puede reordenar elementos y afectar el contenido de esos e...

1  Haga clic en la tecla CTRL para seleccionar una fila y luego agregue una clase CSS a todas las filas debajo hasta que se encuentre una fila con otra clase CSS con JavaScript  ( Clickctrl key to select a row and then add a css class to all rows below it unt ) 
Tengo una aplicación JavaScript que tiene registros de tareas de proyecto que le permiten arrastrar y soltar para volver a posicionar el pedido. Este es un...

61  Arrastrar y soltar SORTable NG: ¿Se repite en Angularjs?  ( Drag and drop sortable ngrepeats in angularjs ) 
¿Es fácil de usar jQuery.sortable en ng-repeat elementos en angularjs? Sería increíble si volver a ordenar los artículos se propagaron automáticame...

0  jquery ui sortable - contención o cancelación solo para algunos artículos en ordenable, solo algunos destinos  ( Jquery ui sortable containment or cancel for only some items in sortable only ) 
Aquí está el quid de él: necesito deshabilitar / contener arrastrar y soltar entre dos clasificados solo para artículos particulares, al tiempo que permite qu...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos