Disable drag & drop on selected elements

[Enngage]

Feature / question

Version: 7.0.0-beta.0

I have edit/delete buttons in my drag & drop list and I need a way of telling angular material to not handle dragging on these elements. Is there a way of accomplishing this?

As a workaround I have a 'switch' which specifically enables drag & drop functionality, but its not exactly user friendly.

Thank you!

[crisbeto]

You can use the cdkDragHandle directive to configure which element should be draggable.

[Enngage]

Yeah, I was thinking of using this, but in this case I need to exclude the buttons from the handle and the drag will not cover full size of the item. It would be really cool if we were able to exclude items from dragging as depending on your particular layout using handle might not be the ideal solution.

[crisbeto]

I see what you mean, but we try to avoid having multiple ways of doing more or less the same thing, if we can. Would something like this cover your case?

.drag-item {
  position: relative;
}

.drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.edit-icons {
 position: relative;
 z-index: 1;
}

[Enngage]

Yeah, I think this should do fine. Thank you!

On Sat, 1 Sep 2018 at 01:33, Kristiyan Kostadinov notifications@github.com wrote:

I see what you mean, but we try to avoid having multiple ways of doing more or less the same thing, if we can. Would something like this cover your case?

.drag-item { position: relative; }

.drag-handle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

.edit-icons { position: relative; z-index: 1; }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/angular/material2/issues/12929#issuecomment-417834646, or mute the thread https://github.com/notifications/unsubscribe-auth/AGzoR5xSpR7j3j6-lmzDYrFOKSJ2Wl1vks5uWhwxgaJpZM4WVq6R .

[crisbeto]

Closing the issue for now. It can be reopened if the solution doesn't work out.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}