Can I disable the drag event from some of my li's?

[ddelapasse2]

My structure is listed below. I want to allow the p1x's to be dragged around but NOT the PX level. The documentation sounded like I could use ignoreClass but that didn't work nor did setting draggable=false or overriding onDragStart. Can't use isAllowed because I need to disable the drag and not just the drop. Is there a way to accomplish this?

P1
--p1a
--p1b
P2
--p2a
--p2b

[camohub]

IgnoreClass should work. It must be on the top level element. Not on the parent or any other layer. So if there is LI it has to have ignoreClass and also content DIV and every element which should not trigger dragging have to have it. Code checks only top level element not every layer if there is ignoreClass.

[robwheatley]

Hi @camohub ,

I'm playing with your code to see if I can use it in a project I'm experimenting with. I like what I have used so far, but I have a question on this subject.

The elements I want to drag around have some quite complex interaction within them (kind of like a to-do list/ task editor, where you can edit the content and click buttons).

My idea was to create a 'drag handle' type function by doing something like this:

<li>
   <div class='dragHandle'>
   </div>
    <div class='task clickable'>
        the complex element goes in here
    </div>
</li>

The dragHandle class would be used for the drag and drop, positioned on the far left of a list item, but the main part has the clickable class on it, so shouldn't invoke the drag.

But I'm finding that the 'clickable' ignore class isn't inherited, so any child elements within an element that has the clickable class won't themselves be clickable, and the drag is initiated. For example:

<li>
   <div class='dragHandle'>
   </div>
    <div class='task clickable'>
        <span> something in here </span>
    </div>
</li>

In the above example, clicking on the dragHandle element will invoke the drag, but so would clicking on the span, even though it's within the div with the clickable class. I don't have control of classes within child elements, so I can't do what I'm trying to do with this approach.

Do you have any thoughts on this, or thoughts on how to create a drag-handle?

Much appreciated.

[camohub]

@robwheatley Yes you are right. There is no inheritance of ignoreClass. You has to add ignoreClass to every element which should be clickable. It means div.task and also the span has to have clickable class.

[robwheatley]

@camohub Thanks for getting back so quickly.

It's a shame. I don't have control over all the child elements, so I can't do that. I'm actually using react to make my app, and I'm using Material-UI to help me with some of the styling. When I add UI elements with Material-UI, it does all the heavy lifting behind the scenes, creating lower level elements to get the style right and it's those lower level parts I can't directly access. For example, adding a check-box with Material-UI actually produces this in the DOM:

<span>
    <span>
        <svg>
            <input>
        </svg>
    </span>
</span>

Material-UI has an API that allows me to inject classes, but only to some of the child elements. So, I'm a bit stuck now. In the example above, I can inject 'clickable' to the top level span, but nothing lower, which means that if someone want's to click on the check-box, it invokes the drag rather than checking the box.

Adding a drag handle feature to your code would be awesome (an

is only moved if the draghandle is clicked), but I guess it would be quite a bit of work (and not something I'd be capable of doing myself). Feature request?

Thank you.

[camohub]

You cant iterate over the DOM which creates your libraries and add the ignoreClass class?

[robwheatley]

@camohub

You cant iterate over the DOM which creates your libraries and add the ignoreClass class?
Possibly, but that sounds like a lot of work.

I solved my problem another way and it seems to work for now. All I did is added 1 character to your code.

On line 181 (of the mobile version), you have an if statement looking to see if the ignoreClass is defined and if the currently clicked item has it. I just changed that line so it ignores the click if != to the ignore class. By doing that, I have created a draghandle.

I thought I would have a big problem to work out what to do, but in the end it took less than 20 seconds to sort. With a few mins work, a new option could be added for a draghandle using that principle I think.

It's a bit of a hack, but it serves my purpose for now as I'm just prototyping.

Many thanks!