marcojakob/dart-dnd

Drag and Drop for Dart web apps with mouse and touch support.

dart-dnd's Issues

Angular2 Dart components

The Angular2 Components library went public last week.

https://github.com/dart-lang/angular2_components

https://github.com/dart-lang/angular2_components_example

Does anyone know if Drag and Drop can be done with them ? Would be very nice..

Cannot read properties of null

We're seeing a large amount of errors in production where something is null and trying to be accessed on pointermove. Here's as much of the stacktrace as we can provide.

This is happening on both Chrome and Edge. We are on dnd version 1.4.3

Scrollable areas and parent elements with margins

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));
  }
}

touch gesture interpreted by OS during drag

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.

Pls. add a way to set something like an "invalid-zone" css class

First of all - Thanks for your package!
It would be cool if you could add a way to add an indicator for an invalid (not allowed) Drop-Zone.

I tried it with my own Acceptor and it's possible to do something like this:

    @override
    bool accepts(final html.Element draggableElement,final int draggableId,final html.Element dropzoneElement) {

        final bool isValid = _isDragZoneValid();
        if(!isValid) {
            dropzoneElement.classes.add("dnd-invalid");
        } else {
            dropzoneElement.classes.remove("dnd-invalid");
        }
        return isValid;
    }

The problem with this approach is that dnd-invalid is set but never unset because an invalid drop-zone never gets onDragLeave... - so no way to remove the dnd-invalid class.

NoSuchMethodError: method not found: 'pubspec'

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.

Add a class to Dropzones on dragStart?

Please correct me if you've already built in this feature to the API in some form. But I would like to be able to add a class to acceptable Dropzones for a Draggable on dragStart. The goal being to give the user hints as to where she might be able to drop a Draggable (like a border-color modification around the Dropzone element).

Please add drag&drop reordering

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

Cannot initialize Dropzone with List<HtmlElement>

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?

interop with AngularDart components

Hi,

First of all, kudos for making such a well thought out package.

After going through the dnd samples, I tried to use dnd capabilities on AngularDart Components but could get them to work. I'm a beginner in Dart, so I couldn't figure out why Chrome throws this error:

Uncaught TypeError: Cannot read property 'get$onMouseDown' of null
at Object.J.get$onMouseDown$x (main.dart.js:81825)
at _MouseManager.installStart$0 (draggable_manager.dart:313)

Any help would be much appreciated. Below are snippets from respective .html, .dart and pubspec.yaml files from dart-lang/angular_components_example on github.

Kind regards,
aPaleBlueDot

{web/main.dart}

...
import 'dart:html';
import 'package:dnd/dnd.dart';

main() {
  bootstrapStatic(AppComponent, [/*providers*/], ng.initReflector);

  Draggable draggableA = new Draggable(querySelector('#draggable-a'),
      avatarHandler: new AvatarHandler.clone());

  Dropzone dropzone1 = new Dropzone(querySelector('#dropzone-1'),
      acceptor: new Acceptor.draggables([draggableA]));
}

{lib/src/material_expansionpanel_demo/material_expansionpanel_demo.html}

<div class="container">
  <div class="dropzone-container">
    <div  id="draggable-a" class="draggable">
      <p> Draggrable? </p>
    </div>
    <div  id="dropzone-1" class="dropzone">
      <material-expansionpanel-set >
        <material-expansionpanel name="Expansion panel">
          <div
            Oh hi. I was just trying not to take too much space here.
          </div>
        </ material-expansionpanel >
      </ material-expansionpanel-set >
    </div>
  </div>
</div>

{pubspec.yaml}

environment:
  sdk: '>=2.0.0-dev.3.0 <2.0.0'
dependencies:
  angular: 5.0.0-alpha+2
  angular_components: 0.9.0-alpha+2
  angular_forms: 1.0.1-alpha+2
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  sass_builder: ^1.1.0
  dnd: ^0.4.0
dependency_overrides:
  analyzer: ^0.31.0-alpha.1
dev_dependencies:
  webdriver: ^1.2.1
transformers:
- sass_builder
- angular:
    entry_points: web/main.dart
- $dart2js:
    commandLineOptions: [--trust-type-annotations, --trust-primitives, --show-package-warnings, --dump-info]
- dart_to_js_script_rewriter

Feature Request

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.

Not scrollable on mobile with handle

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');

onMouseDown disabled with Draggable

I want to listen to onMouseDown for an element. However, it appears that the listener isn't notified once a Draggable object is created with that element.

To reproduce, go to this example:

https://github.com/marcojakob/dart-dnd/tree/master/example/free_dragging

Modify example.dart so the main function is this:

main() {
    querySelector('.draggable').onMouseDown.listen((e) { 
        print("mouse down");
    });

    // Install draggable.
    Draggable(querySelector('.draggable'),  avatarHandler: new AvatarHandler.original());
}

Open index.html with the browser debugger, and you will not see "mouse down" printed when clicking on the box. However, comment out the Draggable constructor, and now you will see "mouse down" printed.

I hoped a workaround could be to listen to onMouseDown on a parent or child node, but that doesn't work either. Set the body of index.html to be

<div class="container">
    <a href="https://github.com/marcojakob/dart-dnd/tree/master/example/free_dragging"
       target="_parent">Example Source on GitHub</a>

    <div class="draggable-parent">
        <div class="draggable">
            <div class="draggable-child">
                <p>Drag me!</p>
            </div>
        </div>
    </div>
</div>

and change the main function of example.dart with

main() {
  querySelector('.draggable-parent').onMouseDown.listen((e) {
    print("parent mouse down");
  });

  querySelector('.draggable').onMouseDown.listen((e) {
    print("draggable mouse down");
  });

  querySelector('.draggable-child').onMouseDown.listen((e) {
    print("child mouse down");
  });

  // Install draggable.
  Draggable(querySelector('.draggable'), avatarHandler: new AvatarHandler.original());
}

None of the print statements executes.

If the page contents scrolls out of the visible area x + y for mouse position becomes wrong

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...

Dropzones don't work with Shadow DOM due to event retargeting

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.

Draggable.destroy should call remove() on avatar

If Draggable.destroy is called while dragging, it will result in the drag avatar sticking around in the location is was at when destroy was called. It seems like the destroy method should just call remove() on avatarHandler.avatar.

Support for aborting a drag programmatically

Not working in Windows 8.1 IE11 Metro

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

How to make new item also draggable?

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?

setting Draggable and Dropzone that are built with Future/Stream

Hi,

How can I setup Draggable and Dropzone on a list that are made "later" by Stream or Future
I try to instantiate thm in ngAfterViewInit but it does not help, by the the time I call Draggable or Dropzone the elements are not built yet.

Thank you,

D'n'D for generated elements (polymer)

Sorry, this isn't an issue per se, but at least this is not a documented usecase ;-)

I have a generated table that is filled by value binding in my polymer component, so rows and cols are data driven.
I want to be able to reorder items that are located in the table columns (and even move them to different columns). Of course the items can and will change over time and as such will be dropped and recreated by polymer.

The initialization of the dnd code seems to be a one time thing. Is there an easy way to attach the existing instance to the new elements? is there a drawback that the associated elements are thrown away from time to time?

Heavy dependency for the library

Hey,

First of all, Good job on the library!
I noticed that polymer dependency is a heavy one. My app is already heavy front-end app that doesn't use polymer.
I am afraid that if I plan to integrate this library that my app will become even more heavier.

1. Thoughts/experiences on the above scenario?
2. Why did you choose polymer?
3. How heavily embededed is the use of polymer within the library?

Thanks!

Clickevent fired when releasing on old position

When dragging an element and releasing it in the original place, then the click event of this element is fired. How can i suppress this? The click event is bound to an angular dart element with (click)=",,," so handling the html-element in the dragend-event would not help very much.

No actually an issue : ported to package:html5

Hi,
I've ported your great lib to package:html5 and published to pub.

Just to let you know.

dnd-over class does not get removed when abort the dragging with esc-key

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?