Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[QUESTION] Custom Component dragging issue

See original GitHub issue

This is how I’ve created a custom component:

comps.addType('custom-video', {
  extend: 'image',
  isComponent: function (el) {
    if (el.getAttribute && el.getAttribute('element-type') === 'custom-video') {
      return {type: 'custom-video'};
    }
  },
  model: {
    defaults: {
      'video-preview-type': 'gif',
      traits: [{
        type: 'select',
        label: 'Type',
        name: 'video-preview-type',
        options: [{value: 'gif', name: 'GIF'},
          {value: 'image', name: 'Image'}],
        changeProp: 1
      }],
      selectable: true
    },
    init: function () {
      this.listenTo(this, 'change:video-preview-type', this.updateSrc);
    },
    updateSrc: function (component, value) {
      const attributes = component.attributes.attributes;
      let src;
      if (value === 'gif') {
        src = attributes['gif'];
      } else if (value === 'image') {
        src = attributes['image'];
      }
      component.view.$el.find('img').attr('src', src);
      this.set('src', src);
    }
  },
  view: {
    events: {
      dblclick: function () {
        postDoubleClickEvent(EditorEvents.VIDEO_DOUBLE_CLICK);
      }
    }
  }
});

This is my custom block:

blockManager.add('Video', {
  label: 'Video',
  content: '<a style="display: inline-block"><img element-type="vaetas-video" style="width: 400px; object-fit: cover" src="https://argoswimvideo.com/wp-content/uploads/2017/11/video-placeholder-1280x720-40.jpg"></a>',
  attributes: {
    class: 'gjs-block fa fa-film',
    title: 'Insert Video'
  }
});

The thing is that I have wrapped the image tag inside tag when it is rendered to canvas. When I click on the element and try to drag it, only tag gets dragged and remains on it’s original place.

Live demo

Issue Analytics

State:
Created 4 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

artfcommented, Jul 30, 2019

With this

view: {
    dragstart: 'noDrag'
  }

you’re still letting the view capturing your click events, so fix it:

view: {
    events: {
      dragstart: 'noDrag'
    }
  }

0reactions

imanubhardwajcommented, Jul 25, 2019

@artf I’m still not able to get it right, I have vaetas-video (non editable component) inside custom-video-wrapper component and when I double click on custom-video-wrapper it sets a random src on vaetas-video but when I try to double click on the custom-video-wrapper again, it isn’t interactive anymore. Debugger shows current selected element is still custom-video-wrapper but it doesn’t react to double click on it.

Codepen => https://codepen.io/mnbhardwaj888/pen/rEEMGE?editors=1010

Video => https://drive.google.com/file/d/1DDGoAVqm9iAyEpAOjeqrs0nS2kRKhNnL/view?usp=sharing

Top Results From Across the Web

react-draggable not working with custom components

How can I get a custom component to drag? The following works when clicked import React from 'react'; import { DraggableCore } ...

Component Dragging Problem - Altium - PCB editor

I think that trying place your component from schematic with "cross probe mode" on can help with this. I do it this way:....

Drag operations - Web APIs - MDN Web Docs - Mozilla

This technique is useful when drawing custom drag images using the canvas element, as in the following example:.

How to Add Drag and Drop in React with React Beautiful DnD

Drag and drop is pretty much what it sounds like — it's an interaction allowing someone to click and drag an item, then...

10.11. Drag and Drop Problem - Open EdX Documentation

Edit the problem title, problem text, introductory feedback, and final feedback for the problem. · Specify a background image in the Background URL...