buttonwoodcx / bcx-aurelia-dnd Goto Github PK

Use iPad to view https://buttonwoodcx.github.io/bcx-aurelia-dnd/#/simple-move-hover-no-preview

https://discourse.aurelia.io/t/bcx-aurelia-reorderable-repeat-supresses-click/1638/13

Something about touchstart event handler on mobile devices.
Aurelia DefaultLinkHandler uses global click handler to handle route jump.
Needs more investigation.

I'm getting TS7051: Parameter has a name but no type. Did you mean 'arg0: Element'? in file bcx-aurelia-dnd/index.d.ts(55,23).

I'm running Typescript 3.5.3. Can I get around this or should it be corrected?

Hi @huochunpeng, do you have a solution for resizing boxes when using bcx-aurelia-dnd? Where do i have to hook up in your code? I want to resize when i grab the edges (with little a treshold) and dragging when i grab the middle of a box.

Having issue with using @getterThrottle in a component using dnd (probably only affect usage of events like 'dnd:didEnd').

aurelia-event-aggregator calls subscribers synchronously (no setTimeout), but somehow aurelia rendering started too early (before the callback of 'dnd:didEnd' subscribers), which triggered @getterThrottle to cache value in wrong state.

Maybe it's not rendering started too early, it's some mutation in dndDrop triggered some observers which fire getter evaluation immediately (without using queueMicroTask ?!).

Need more investigation.

Hi there,

Really good to see something that actually has documentation that can be followed and built upon.. thanks.

Wondering if you could create an example of grid snap or snap to a position if you are close etc.

(I found an example of the other item I wanted..
Simon - si2030

This isn't as much of an issue as it is a help request. Most sorting libraries give you access to the moved element/item, its previous index, and its new index in the callback that's invoked when the reordering ends. With reorderable-after-reordering I only get the newly reordered list so it's kind of difficult to find out which item was moved and to which new index.

Is there an easy way I can achieve this or will I have to hack some function that compares the previous and new order of the list?

How could I go about adding "automatic" vertical scrolling while dragging items in a long list that overflows the container?

Kind of like this demo on CodePen (it's not my code, but shows the issue).

This is not a bug. I'm just asking for ideas or pointers on how to do it.

This is a problem with aurelia app, where you can put ref="dndElement" on a custom element like <my-comp>.

Since custom element tagName is unknown to HTML standard, it got default display: inline style with width/height 0 (most likely if your comp has non-inline elements inside).

Need to add new preview drawer to deal with unknown tagName, instead of duplicating element's size, it needs to duplicate all child elements' size.

I get the following error when using dnd in my aurelia project:

node_modules/bcx-aurelia-dnd/index.d.ts(55,35): error TS8020: JSDoc types can only be used inside documentation comments.

I used 'au install bcx-aurelia-dnd' to install it and am using the aurelia cli if it matters.

Hi there,

Reading your docs for a second time and you have a small part on crosstalk at the bottom of "DnD target". I actually want to be able to drag a source and drop it onto another drop zone but as a re-orderable list item in the second drop zone.. can this be done and if so I am wondering how.. especially considering your warnings on sources being mutable... Let me know if you need more clarification.. I note this can be done from one list to another but I was wondering if you can do it from a DnD zone to reorder-able list etc

Hi

Could it be possible to create a scenario where you have multiple lists where you can d&d items and also a sort of master list from which u can only take items? So you can't put items in there by d&d'ing from the multiple lists towards it?

Is it possible to drag an source out of a target, when was already dropped onto it?
Or resize a source bigger than its target.

Most dnd examples in doc site has 1px offset in both x and y direction when dropped to new location. It looks like a nice little animation on drop, but I didn't do it intentionally.

This is due to container has 1px border, when you use postion: absolute plus left: 10px; top: 10px; on the movable box, the 10px is relative to the container content (the box inside border), which has 1px difference from previewElementRect.x - targetElementRect.x, because targetElementRect.x is for container border box.

Needs more reading on absolute position and box-sizing. Then either fix the container css, or fix the newLoc calculation.