Bug: I can't use draggable="true" (HTML Drag and Drop API) in others places

[malestroms]

Hi all,

I just start working on another component that is rendering at the same time as the one that is using this one. So I'm basically doing a list and adding the attribute draggable="true", the problem is that is not working unless I turn off react-sortable-tree, so looks to me that react-sortable-tree is taking over the events or something not allowing to any other element with draggable="true" works as expected.

list e.g:

<ul>
   <li draggable="true">AAA</li>
   <li draggable="true">BBB</li>
   <li draggable="true">CCC</li>
<ul>

Any suggestions or workaround of this? there is a way to "reactivate" the event that is checking drags on the page? or something ? any help will be appreciate it

Thanks!!

[Dmitry-Ostashev]

I faced with the same problem. This workaround helped me: react-dnd/react-dnd#2868 (comment)

[anant-harryfan]

it should be draggable = true i guess.
idk takeout the ans from this

   <div class="thenga" id="n">
   dffsdf
    </div>


<script>

    dragElement(document.getElementById("n"));

    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        elmnt.draggable = true
        elmnt.addEventListener('dragstart', dragMouseDown)
        elmnt.addEventListener('dragend', elementDrag)

        function dragMouseDown(e) {
            elmnt.style.opacity = 0;
            e = e || window.event;

            pos3 = e.clientX;
            pos4 = e.clientY;

        }

        function elementDrag(e) {
            e = e || window.event;

            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;

            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            elmnt.style.opacity = 1;
        }

    }

`