marcojakob / dart-dnd Goto Github PK
View Code? Open in Web Editor NEWDrag and Drop for Dart web apps with mouse and touch support.
Home Page: https://code.makery.ch/library/dart-drag-and-drop/
License: MIT License
Drag and Drop for Dart web apps with mouse and touch support.
Home Page: https://code.makery.ch/library/dart-drag-and-drop/
License: MIT License
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..
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));
}
}
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.
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.
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.
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).
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:
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?
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
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.
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');
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.
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.
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.
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
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,
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,
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?
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.
Thanks!
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.
Hi,
I've ported your great lib to package:html5
and published to pub.
Just to let you know.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.