-
Notifications
You must be signed in to change notification settings - Fork 252
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom dragImage #27
Comments
You can create new instance of DragDropConfig class:
Is that solution acceptable for you? |
Thank you. I found that this code snippet works: 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:
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). |
I propose to add the property dragImage to the Draggable component, so you can use:
<div class="panel panel-default"
dnd-draggable [dragEnabled]="true"
[dragImage]="/images/simpler.png">
...
<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? |
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? |
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:
The getDragImage is an ordinary name of any function you can use by you own. You can change this name to any other. |
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! |
Hello, can you provide us with feature customization dragImage?
I can't find any @output for this purpose. I tried to extend DragImage class, maybe, for overriding constructor function, but it seems, that it is not easy way (through 'bootstrap' and 'provide'). Is it possible with current implementation? Thank you!
The text was updated successfully, but these errors were encountered: