Блог

Я работаю с использованием Drag event перетаскивания объекта с помощью Vue js. Я использую Drag event встроенную vue js, потому что это событие event.dataTransfer может передавать данные из одного DOM в другой DOM, что действительно важно в данном случае.

Это мой template.html :

Эта часть является перетаскиваемым объектом. Этот DOM также может быть целью перетаскивания.

 <th v-else-if="isCluedata amp;amp; isDraggableLetter"
    class="droptarget"
    v-on:drop="drop"
    v-on:dragover="allowDrop"
    :data-col="cell.value" data-letter-id="cell.value" style=""
>
    <span   ref="draggableContainer" class="test"
           style=""
           v-on:dragstart="dragStart"
           v-on:drag="drag"
           draggable="true"
           :value="cell.value"
           :id="cell.id">{{ display }}</span>
</th>
 

эта часть кода является областью перетаскивания, но она должна быть способна перетащить объект обратно в DOM выше.

 <td v-else-if="isCelldata"  @click.prevent="click"
    :class="[classes, { 'blank' : isBlank, 'cell-default-bg-grid': classes }]"
    class="droptarget"
    v-on:drop="drop"
    v-on:dragover="allowDrop"
>    
    <span class="square" :id="cell.id">
        <span class="entered-number ">{{ display }}</span>
    </span>
</td>
 

И это script.js

 Vue.component('component-cell', {
    template: '',
    props: ['cell'],

    data: function () {
        return{
            active: false,
            currentX: null,
            currentY: null,
            initialX: null,
            initialY: null,
            xOffset: 0,
            yOffset: 0,
        }
    },
  
    computed: {
       ....
    },
    methods: {
        dragStart:function(event)  {
            console.log('dragStart');

            console.log(event);
            console.log(event.target);
            console.log('hey');

            if (event.type === "drag") {
                this.initialX = event.clientX - this.xOffset;
                this.initialY = event.clientY - this.yOffset;
            }

            event.dataTransfer.setData("Text", event.target.id);
            // event.dataTransfer.type("x");

        },
        drag:function(event)  {
            console.log('in drag');
            console.log(event);

            if (event.type === "drag") {
                this.currentX = event.clientX - this.initialX;
                this.currentY = event.clientY - this.initialY;
            }

            this.xOffset = this.currentX;
            this.yOffset = this.currentY;

            if (this.isCluedata amp;amp; this.isDraggableLetter){
                var dragItem = this.$refs.draggableContainer;
                console.log('*********dragItem');
                console.log(dragItem);

                if (this.xOffset amp;amp; this.yOffset) {
                    console.log('xxxxx');
                    var axis = Math.abs(event.clientX - this.xOffset) > Math.abs(event.clientY - this.yOffset) ? 'x' : 'y';
                    console.log('axis: '   axis);
                    //$("#test").draggable('option', 'axis', axis);

                    Draggable.create(this.$refs.draggableContainer, {
                        type: "x",
                    });

                    // event.clientX = event.clientY = null;
                }

                // this.setTranslate(this.currentX, this.currentY, dragItem);

                // TweenMax.set(dragItem, { x: 0, y: 0 });
            }

        },
        setTranslate: function(xPos, yPos, el) {
            console.log('setTranslate');
            console.log(el);
            console.log(xPos, yPos);
            // el.style.transform = "transform: rotate(90deg);"
            el.style.transform = "translate("   xPos   "px, "   258   "px, 0)";
            // TweenMax.set(this.$refs.draggableContainer, { x: 0, y: 0 });
            console.log('after translate');
            console.log(el);
        },
        // dragging:function(event) {
        //     document.getElementById("demo").innerHTML =
        //         "The p element is being dragged";
        // },
        allowDrop:function(event) {
            console.log('allowDrop');
            event.preventDefault();
        },
        drop:function(event) {
            console.log('drop');

            this.initialX = this.currentX;
            this.initialY = this.currentY;
            // console.log(event);
            event.preventDefault();
            console.log(event);
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            console.log('show event target');
            console.log(event);
            console.log(data);
            console.log('show event target end');
            this.$root.setValueOnCell(event.target.id, '', event.target.innerText);
        },
      
    },
});
 

As you can see I am using native drag event vue js to do drag and drop. I am trying to do drag function and make sure the object can move in axis x (horizontally) or axis y (vertically) only, using Draggable.create() but it does not work. As you can see on drag() function , I also was trying using

 this.setTranslate(this.currentX, this.currentY, dragItem);
 

and

 TweenMax.set(dragItem, { x: 0, y: 0 });
 

but neither of them work to make the object move horizontally.

For your information, I have tried to using draggable widget https://api.jqueryui.com/draggable/#option-axis without using native drag event like above and it worked. It can move the object horizontally and vertically only. But the thing is, this widget is Pointer Event , which is has no event.dataTransfer , and i have no way to transfer the data. Moreover, it looks like need Droppable widget(https://api.jqueryui.com/droppable/). But when I try implement droppable widget in vue js using:

 Droppable.create(this.$refs.draggableContainer, {
    ..
});
 

I got error the Droppable.create is not a function , or sometimes i got error Droppable is not define , even I have define and import the library droppable widget.

That is why I keep using native Drag event instead using widget.

How can I solve this problem?