sunpietro / dragster Goto Github PK

There are parameter to set a child element from a dragster-block, for example fa fa-arrows icon

I started using this plugin and noticed that on IE9 it doesn't work, the drag item just doesn't drag. Is it normal? Doesn't this plugin give support for IE9 at all?

Thanks

Hi, just tried your demo and found this issue with it.

If you double click dragable item, for example the "2.2", and continue holding the second click and drag, it makes the item not "float anymore". It happens right in the demo, here is gif of what happens.

Unexpected possibility to drop elements to unexpected regions when a draggable element is placed another draggable element.

Steps to reproduce the issue:

1. Create a new instance of Dragster.js that limits regions and draggable elements,
2. Inside any of draggable elements implement interface that allows to drag'n'drop elements inside,
3. Create another instance of Dragster.js, only for elements inside a draggable element,
4. Drag an element from inside of draggable element to outside of it,
5. Drop an element on a placeholder,

Actual result:
Element is dropped on disallowed region.
Expected result:
Element should not be dropped on disallowed region.

The recording of incorrect behaviour:

Hi, I m trying to use Dragster on typescript project, but I cant import your lib.

import * as Dragster from 'dragster.es6.js';

I get this on the console

Cannot find module 'dragster.es6.js'

If I set wrapDraggableElements: false and add draggable="true" class="dragster-draggable" to the elementSelector element isDraggableCallback() returns false because element.dataset.dragsterId is not set.

It appears to me as this has replaced the draggable="true" attribute at some point as I can't see that, that is used.

Setting dragsterId inside wrapDraggableElements() as follows fixes this.

    wrapDraggableElements = function (elements) {
        if (finalParams.wrapDraggableElements === FALSE) {
            elements.forEach(function (draggableElement) {
                draggableElement.dataset.dragsterId = dragsterId;
            })
       ...

Hi, on mobile when I drag one element to another place and then i try to scroll the page it doesn't scroll. From the tests I made it also happens on the demo page. Do you have any idea why this happens?

I would like to add drag'n'drop interface to new elements added to any region handled by Dragster.js library.

Hello,
first of all congrats by this awesome library !! 👏 👏
works sweet.

Just found a problem using this OnBeforeDragEnd function.
I am setting the current region with draggable elements as occupied.
So if a new draggable elements try to be dropped there i check a condition and then:

Option 1) i replace the current element by the new one.
Option 2) i prevent the element to be blocked (something like not allowed position);

  onBeforeDragEnd(e) {
    if(!!e.dragster) {
      let origin      = e.dragster.drag.node;
      let destination = e.dragster.drop.node;

      if(!!origin && !!origin.parentNode) {
        if(origin.parentNode.classList.contains('slot')) {
          origin.parentNode.classList.remove('occupied');
        }
      }

      if(!!destination) {
        let slotIsOccupied = destination.classList.contains('occupied');
        let slotIsNotAllowed = destination.classList.contains('not-allowed');
        if(slotIsOccupied && !slotIsNotAllowed) {
          // This removeChild is not working because you already added the element there 
          // the temp one, and that is awesome 
          // i just want to remove the element already there and then add this one
          // destination.removeChild(destination.firstChild);
        } else if (slotIsNotAllowed) {
           // Here prevent the element to be dropped
        } else {
          // If the slot is available i add the 'occupied' for the new element dropped
          destination.classList.add('occupied');
        }
      }
    }
  }

Because of my project needs i cannot have a region where you just add elements one above or below another.
I need to have like fixed slots. So i implemented this way :

<ul class='column'>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
        <li class='region--drag slot'></li>
</ul>

I hope that you understand my question and be able to oriented me 🙏
Thanks in advance

As a user I would like to define a zone where all the draggable blocks will be defined, but a user won't be able to move them. The blocks will be cloned into the drop area.
Imagine the shopping cart and a list of products that can be dropped inside the cart multiple times.

There's missing callback when an element is dropped. It's needed to provide custom interactions after dropping elements.

Disable drag'n'drop when clicking with right mouse button.

When element is not dropped on the dropping region, then it stays dragged all the time.