@end showing same value for From and To.

[dann95]

Hi there, im trying to make a card game, and if i use the "move" prop, i get a lot of events, so i see that @end exists, and it only trigger when u finish moving, but im having the following issue:

I have a component called Spot, so i have many spots where cards can be, in Spot component i use Draggable to drag and drop cards, in this case im using @end="moveCard" but see screenshots to understand what happen:

<template>
    <div id="container">
        <ul class="deck">
          <draggable :list="cards" :options="{group:'solitaire'}" @end="moveCard" :id="'spot-'+number" class="draggableArea">
            <card v-for="card in cards" :instance="card"></card>
          </draggable>
        </ul>
    </div>
</template>
<style scoped>
    #container{
        background-color:#90FF0E;
        border:1px solid #583BFF;
        width:130px;
        height:200px;
    }
    #container ul {
        display:table-cell;
        list-style-type:none;
    }
    #container ul li {
        position:relative;
        top:-12px;
    }
    .draggableArea {
      min-height: 100px;
      min-width: 100px;
      border:2px solid rgb(255,133,100);
    }
</style>
<script>

    import Card from './Card'
    import draggable from 'vuedraggable'

    export default{
        data(){
            return{

            }
        },
        components:{
                Card,
                draggable
        },
        props: ['cards','number'],
        methods: {
          moveCard: function (event) {
            console.log(event)
            window.Event.$emit('movement',this.generateMovementInstructions(event))
          },
          move: function (event) {
            return false
          },
          generateMovementInstructions: function (event) {
            return {
              //card: event,
              from: this.detectSpotNumber(event.from.id),
              to: this.detectSpotNumber(event.to.id)
            }
          },
          detectSpotNumber: function (string) {
              return parseInt(string.replace('spot-',''))
          }
        }
    }
</script>

Ok using that code, look to sequence of screen shots:

here we got a new game, the first spot with cards is the number 5, and at his right is number 6.

so i move the 7 to a right spot, and it shows From and To as left spot id.

and when i return it to left spot (5), it shows From and To as id of right spot.

so alaways it is using from and to as (origin value).. can someone help me?

[David-Desmaisons]

Hello @dann95 , for all events send by vue.draggable you should always reffer to Sortable documentation as vue.draggable dispatch the same events. On the end event, properties from and to relates to the container element, which in your case is the same because you only have one draggable component. You should watch the update event instead: it has newIndex and oldIndex properties that should provide you the necessary informartion for your custom event.

[dann95]

Hi @David-Desmaisons did u understan that @end event is refering the To and From property as the the origin , it isnt only only one draggable, are 13.

[dann95]

when i use the move prop, i recive different from and to property on the Event object, but when using @end it shows the Origin draggable area as From and To, thats the issue.

[dann95]

I solved my problem saving destination and origin (to, from) in model of the component, and broadcasting the event with the @end..

[dann95]

but see the screenshots and read description, my english is bad but i think i can explain it better..

[David-Desmaisons]

@dann95 , I got you now! First I am glad you found a work-around. As I was mentioning, vue,draggable is just forwarding the event sent by Sortable, so any issue should be treated with that project. Regarding vue.draggable, I was thinking that a change event that includes item moved as well as positions and target and source list and component might be helpful. What do you think?

[dann95]

yeah, perfect! and about be a fowarding of Sortable, sorry i didnt got it i thinked that was a bug on Vue plugin, well if i can help in something just tell me ❤️

[David-Desmaisons]

@dann95 , version 2.7.0rc has been published and conatins the change event

[dann95]

@David-Desmaisons thanks for the mention, i will check that, im having another issue about nth-child and stacked items =/ , but thanks!

[dann95]

@David-Desmaisons can you help me with a problems? when im dragging it is moving the UL and not the LI element because of nth-child, have u any idea? =/

[dann95]

@David-Desmaisons i got it, :options="{element:} , sorry for stupid asks, haha im a phpdeveloper and im trying to make a game with vuedraggable xD