0

Intento crear dos funciones para mouseover y mouseout, pero esta parte de vuejs me cuesta un poco de trabajo, esto tengo en mis funciones de vuejs, el que me interesa un poco mas es el aespNew: this.aesp

 import draggable from 'vuedraggable'

export default {
    components: {
        draggable
    },

    props: ['mSemestreI','mSemestreII','mSemestreIII', 'mSemestreIV', 'mSemestreV', 'mSemestreVI', 'mSemestreVII', 'mSemestreVIII', 'mSemestreIX','aesp'],

    data() {
        return{
            mSemestreINew: this.mSemestreI,
            mSemestreIINew: this.mSemestreII,
            mSemestreIIINew: this.mSemestreIII,
            mSemestreIVNew: this.mSemestreIV,
            mSemestreVNew: this.mSemestreV,
            mSemestreVINew: this.mSemestreVI,
            mSemestreVIINew: this.mSemestreVII,
            mSemestreVIIINew: this.mSemestreVIII,
            mSemestreIXNew: this.mSemestreIX,
            aespNew: this.aesp,
            btn: 'primary'
        }
    },

    methods: {
        onAdd(event, posx){
            let id = event.item.getAttribute('data-id');
            axios.patch('/materias/updatePosx/' + id, {
                posx: posx
            }).then((response)=>{
                //success message
            })
        },
        update(){
            this.mSemestreINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIVNew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVNew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreVIIINew.map((posy,index) => {
                posy.posy = index + 1
            })

            this.mSemestreIXNew.map((posy,index) => {
                posy.posy = index + 1
            })


            let posy = this.mSemestreINew.concat(this.mSemestreIINew).concat(this.mSemestreIIINew).concat(this.mSemestreIVNew).concat(this.mSemestreVNew).concat(this.mSemestreVINew).concat(this.mSemestreVIINew).concat(this.mSemestreVIIINew).concat(this.mSemestreIXNew);

            axios.put('/materias/updateAll', {
                posy: posy
            }).then((response) => {
                //success message
            })
        },
        mouseOver: function(index){
            let mover = this.aespNew;
            console.log(mover);
            this.active = true;
        },
        mouseOut:function(){
            console.log('false');
            this.active = false;
        }
    }
}

la parte del Log me arroja esto haciendo esto console.log(mover);

Log de aespnew

A final de cuentas tomare ese area_especial_id para hacer un hover a un elemento draggable (cambiar color)

introducir la descripción de la imagen aquí

Edito:

Script a traducir:

 $('#<?echo $listaTrayectoria->getIdAreaEspecialidad();?>').mouseover(function(){

$(".<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("background-color", "<?echo $trayectoria->getColor(); ?>");

$(".<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("color", "white");

                                    });
$('#<?echo $listaTrayectoria->getIdAreaEspecialidad();?>').mouseout(function(){
 $(".<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("background-color", "white");
                                        $(".<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("color", "black");
                                    });

   //De materias a trayectorias
 $('.<?echo $listaTrayectoria->getIdAreaEspecialidad();?>').mouseover(function(){

   $("#<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("transform", "scale(1.2)");
                                    });
 $('.<?echo $listaTrayectoria->getIdAreaEspecialidad();?>').mouseout(function(){
 $("#<?echo $listaTrayectoria->getIdAreaEspecialidad();?>").css("transform", "scale(1)");
});
<?}?>

lo que he logrado hasta ahorita es hacer el hover de color pero manualmente pero solo con la lista, me falta ligar los botones con las listas

introducir la descripción de la imagen aquí

1 respuesta 1

1

No estás mostrando el template por lo que no sabemos cómo estás insertando el draggable en el template. El warn que te aparece es porque en la versión 2.20 cambió la sintaxis.

La librería subyacente (draggable.js) recibe opciones que determinan el comportamiento del conjunto ordenable. Por ejemplo, si declaras el tiempo de la animación, y la clase de la "manilla" desde donde agarras cada cajita:

{
  animation:150, 
  handle:'.manilla'
}

En la sintaxis anterior de Vue.sortable, el componente se declaraba como:

<draggable v-for="list" :options="{animation:150, handle:'.manilla'}">
  <!-- -->
</draggable>

Ahora esas opciones se pasan transparentemente al componente:

<draggable v-for="list" :animation="150" :handle=".manilla">
  <!-- -->
</draggable>

Pero también creo que tienes otro problema, y es que estás usando mal el concepto de Array.prototype.map.

Si lo que quieres es reasignar la propiedad "posy" de cada elemento, tienes que retornar el elemento modificado.

Por ejeplo

 let arrayDePosiciones = [{posy:0},{posy:1},{posy:2}];
 arrayDePosiciones = arrayDePosiciones.map((elemento,index)=>{
    elemento.posy = index+1;
    return elemento; // <--- esto 
 });
 // resultado es [{posy:1},{posy:2},{posy:3}]

La iteración que haces ahora no retorna nada, así que la salida de

  this.mSemestreINew.map((posy,index) => {
     posy.posy = index + 1
  })

Sería [undefined, undefined, undefined]

(Pero en tu caso es inofensivo porque tampoco estás reasignando la salida a this.mSemestreINew

6
  • Bien pero ahorita posy esta funcionando bien ya que hago un cambio de posicion y lo registro en la base de datos, lo que necesito es realizar o tomar un valor de lo que me arroja la funcion mouseOver, como acceder solo al area_esepcialidad_id de cada boton, edito lo que tengo
    – Dohko19
    Commented el 20 nov. 2019 a las 15:32
  • No entiendo bien lo que quieres hacer. El componente que muestras dibuja los semestres y los botones? La idea es que cada botón es una asignatura y al pasar el mouse sobre ellos se resalta ésta en los semestres donde figure?
    – ffflabs
    Commented el 21 nov. 2019 a las 0:22
  • Exacto, Por ejemplo los botones llevan un ID con nombre area_especialidad_id, y los elementos de la lista tambien llevan ese id (para referenciarlos) entonces cuando pase el mouse sobre el boton por ejemplo id = 10, los elementos de la lista con referencia al id 10, se coloreen o hagan el hover, tengo el script en JS pero necesito pasarlo a vue, edito la pregunta
    – Dohko19
    Commented el 21 nov. 2019 a las 0:52
  • Mira, mejor haz otra pregunta, porque mi respuesta sirve para entender el warning. Asegúrate te poner el código con que dibujas los botones y semestres (el template o html que tengas). Y explícanos el propósito del método update, porque no entiendo qué quieres hacer aumentando los posy
    – ffflabs
    Commented el 21 nov. 2019 a las 13:43
  • la parte de posy y posx es solamente para el ordenamiento de la Malla, cordenadas X y Y, como te indique estoy usando Draggable
    – Dohko19
    Commented el 21 nov. 2019 a las 15:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.