By the way it's not working on Windows 8.1 IE11 Metro. Some <meta ...> should be added to html for disabling default back/forward on drag?

Reported by Slava Pankov

We noticed that drag suppression hasn't really been working. This fixes that, by effectively not starting a drag event until the suppression distance has been met. Once the distance has been exceeded, the drag started event is dispatched.

@marcojakob

Here you can see where the mouse cursor is and where the draggable object ist. http://wsk.angular.mikemitterer.at/styleguide/index.html#/draganddrop

The problem becomes even worser on mobile where the page is narrower...

The onMouseMove events setup in draggable.dart (https://github.com/marcojakob/dart-dnd/blob/master/lib/src/draggable.dart#L320) will never handle targets within Shadow DOM. Reason for this is, that events from within the Shadow DOM are retargeted to its host. For event handlers setup outside the host, the event target will always be the host and not potential drop targets within.

// Install mouseMove listener.
    _dragSubs.add(document.onMouseMove.listen((MouseEvent event) {

Also have a look here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/#toc-events

A solution might be to also register mouseover handlers, when the dropzone is installed to elements and react properly.

Hi Marco, I fix your DnD to work with polymer. It's only in added Document in which events happens. Feel free about pull / rewrite / drop this ;)

Br, František Belšán

Since 0.2.0 I get

Precompiling dependencies...
Loading source assets...
The null object does not have a getter 'pubspec'.

NoSuchMethodError: method not found: 'pubspec'
Receiver: null
Arguments: []
dart:core                                                                                                                       Object.noSuchMethod
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 251   _PackageDependencyComputer._PackageDependencyComputer
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 199   DependencyComputer._loadPackageComputer
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 107   DependencyComputer._transformersNeededByTransformer
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 258   _PackageDependencyComputer._PackageDependencyComputer
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 199   _loadPackageComputer
dart:core                                                                                                                       List.forEach
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/dependency_computer.dart 53    DependencyComputer.DependencyComputer
/Volumes/data/b/build/slave/dart-editor-mac-dev/build/dart/sdk/lib/_internal/pub/lib/src/barback/load_all_transformers.dart 33  loadAllTransformers.<async>
dart:isolate

If I remove the dependency to your package the error is gone.

I've the issue, that the dnd-over class stays on the last dragged over element when i abort the dragging with esc-key.

Is there a way to disable the abort with esc?

Wow, this must be one of the best drag&drop library ever! Only one request: can you support a drag&drop reordering of vertical (or horizontal) lists of elements? For example if I want to move an element from the position 4 of the list to the position 10, it should be able to do it in the following ways:

• INSERT AFTER: shift all the elements > 10 down (or right) and put the 4 at the 11th position
• INSERT BEFORE : shift all the elements > 9 down (or right) and put the 4 at the 10h position
• SWITCH : put the element 4 in place of element 10, and element 10 in place of element 4, without moving any other elements
• GROUP INSERT : shift a multiple selection of N elements from their original positions to the 11+N position, using the INSERT AFTER mode for the group of elements
• GROUP SWITCH : put a multiple selection of N elements from their original position 4+N to 11+N, and the group of elements that was 11+N in place of the elements that were at the 4+N position.

Also those features should be useful: REALTIME REORDERING WHILE WE DRAG: dragging an element or a group of elements above the list should animate the list showing the auto reordering of the list in case the element is dropped at the current point. MULTI-COLUMNS / ROWS SUPPORT : drag&drop reordering should work in multi columns or multi rows elements lists, with the possibility to drag&drop between different columns or rows. UNDO: an animation should undo the latest drag&drop reordering

Could we change the check in the constructor for Dropzone from:

    if (_elementOrElementList is ElementList) {

to

   if (_elementOrElementList is List<Element>) {

I would like to use the library together with angular dart's ViewChildren where i get a List.

Or is there a reason for ElementList?

Firstly, thanks for a great library. I am trying to do DnD on touch devices. However, the drag gesture also has an effect on the whole page. Using your example: https://github.com/marcojakob/dart-dnd/tree/master/example/basic On an iPhone or iPad while dragging the paper (which becomes a face) the whole page moves.

Do you know how to stop this?

Finally, you library is the only one I could get to work with the Chrome Developer Tools Touch mode!! Cheers, Phil.

This addresses https://github.com/marcojakob/dart-dnd/issues/17

I tested it in our use case, and it worked. I didn't add unit tests, because it doesn't look like the repo has any setup for it, and I don't want to force my unit test tool opinions upon you.

In an AngularDart app with a scrollable div, the positioning of the drag avatar is off when dragging inside the scrolled div. The following subclass of OriginalAvatarHandler fixed it for me - but I don't know if it'll break in other circumstances:

class CustomAvatarHandler extends OriginalAvatarHandler {
  Point _delta;

  @override
  void dragStart(Element draggable, Point startPosition) {
    Point clientPos = draggable.getBoundingClientRect().topLeft;
    Point offsetPos = draggable.offset.topLeft;
    _delta = Point(offsetPos.x - clientPos.x, offsetPos.y - clientPos.y);
    super.dragStart(draggable, startPosition);
    avatar.style.position = 'fixed';
    setLeftTop(offsetPos);
  }

  @override
  void setLeftTop(Point position) {
    super.setLeftTop(Point(position.x - _delta.x, position.y - _delta.y));
  }
}

Initially I have a table of 4 rows, and I initialized Draggable once.

    Draggable(tableElement, avatarHandler: AvatarHandler.clone());

    Dropzone dropzone = Dropzone(stationListElement);

    dropzone.onDrop.listen((DropzoneEvent event) {
      _reorder(event.draggableElement, event.dropzoneElement);
    });

Later the component added a new row after some user interaction.

Problem is that new row isn't draggable. I tried initialize again but the drop event is listened twice.

Do you have any suggestion how to handle it on my use case?

Hi!

When filling a whole page with a list of list tiles with drag handles, when touching the non-handle part, the page is not able to scroll, whereas when touching outside of the tile it is possible.

    AvatarHandler avatar = AvatarHandler.clone();

    dropzone = Dropzone(querySelectorAll('.sortable-zone'));

    draggable = Draggable(querySelectorAll('.sortable'),
        avatarHandler: avatar, handle: '.handle');

Let me say your lib is great and easy to use. However, it is lacking one feature (and so is the native dart) that would ease development for many. That one feature would be the offset between the mouse pointer (position) and the upper left corner of the element being dragged. This would help in setting the position for the element being dragged.