Custom dragImage

[ivanovjaroslaw]

Custom dragImage

[akserg]

I use only native, standard HTML5 DnD implementation in this project, so you can use only Image or Canvas elements to show the drag operation. Please follow the resources below to get more information about DataTransfer.setDragImage method:

• https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
• https://html.spec.whatwg.org/multipage/interaction.html#dom-datatransfer-setdragimage

The getDragImage is an ordinary name of any function you can use by you own. You can change this name to any other.
The argument of getDragImage method is just a value you can pass through from the markup. You can drop it and call getDragImage without any arguments.

[ivanovjaroslaw]

So, I think all right. Only one notice. I think that mention about custom [dragImage] should be placed in MD file. You can also suggest users about using HTML to SVG technique (via svg with foreignObject, then creating Blob with type 'image/svg+xml', then creating window.URL.createObjectUrl from the Blob and then insert this into some image element. Now you can use this image which linked to some peace of html in custom dragImage). Thank you!

[akserg]

You can create new instance of DragDropConfig class:

bootstrap(App, [
    ...,
    DND_PROVIDERS // It is required to have 1 unique instance of your service
    provide(DragDropConfig, {useFactory: () => {
      return () => {
        let cfg = new DragDropConfig();
        // Create an image
        let img = new Image(); 
        // Use your image here
        img.src = 'http://your-site.org/images/simpler.png'; 
         // You can specify offset by x and y coordinate as second and third parameters
        img.dragImage = new DragImage(img);
        return cfg;
      }
    }})
]).catch(err => console.error(err));

Is that solution acceptable for you?

[ivanovjaroslaw]

Thank you. I found that this code snippet works:
bootstrap(App, [ ..., DND_PROVIDERS, provide(DragDropConfig, {useFactory: () => { let cfg = new DragDropConfig(); // Create an image let img = new Image(); // Use your image here img.src = 'http://your-site.org/images/simpler.png'; // You can specify offset by x and y coordinate as second and third parameters cfg.dragImage = new DragImage(img); return cfg; }}) ]).catch(err => console.error(err));

But it seems overriding in all cases. In the constructor of DragDropConfig I can't parse some control value (for example, maybe class of dragged element or another value to detect that should we change common behavior of cloning copy of dragged element to another strategy).

For example, there are dragged element classes. If the classList contains 'drag-ico-cogs' class, so, I want to override default behavior of cloning and set something like this:

let el = document.createElement('i'); el.classList = 'fa fa-cogs'; cfg.dragImage = new DragImage(el);

Is it possible to get some information about dragging process in construction of DragDropConfig?

I tried to extend AbstractComponent and override ondragstart function, but there are some restrictions (for example, _onDragStart is private, but it will be cool, if it would be protected).

[akserg]

I propose to add the property dragImage to the Draggable component, so you can use:

• The string value as url to the image

<div class="panel panel-default" 
        dnd-draggable [dragEnabled]="true" 
        [dragImage]="/images/simpler.png">
...

• The custom function to return the value of dragImage programmatically:

<div class="panel panel-default" 
        dnd-draggable [dragEnabled]="true" 
        [dragImage]="getDragImage(someData)">
...
getDragImage(value:any): string {
  return value ? "/images/simpler1.png" : "/images/simpler2.png"
}

What do you think?

[ivanovjaroslaw]

It would be great, but I think about more flexible property like dom-element. For example, I don't use any images on my productions, but use some reusable UI elements and icons (for instance, font-awesome). And for my case I need some html in dragImage, for example, . Maybe I don't understand clearly about DataTransfer.setDragImage(). Is it possible to use some custom html?
And I can't understand what about a value - argument of getDragImage() function? Will it represent the dragging element? What the question. I will need specify some type (which cause different images when dragging) in class of dom-element or in object of dragData?
Thanks!