xieziyu / angular2-draggable Goto Github PK

Hi ,
is it possible to have teh same featuites as jQuery draggable, please ? such as:

• snap to grid
• resizeable

?

I would like the option to instead of translating using pixels, translate relative to the view, so it will be in vw and vh for x and y respectively, and will not change position relatively when window resize happens.

How do I initialise in the component.
For example:
const video = document.createElement('video'); body.appendChild(video);

How do I add the directive to this video tag? I want to make it draggable.

Your directive is great, however in my use case I have layers of components that need to keep their z-index values. Using your directive, after dragging an element, its z-index is set to auto. I believe this behavior is coming from this line.

I'm not sure if this is intended behavior, but my request is to be able to keep a component's "old" z-index without having to call window. getComputedStyle.

Some draggable windows should be underneath other objects such as modals. Forcing a z-index of 99999 doesn't allow this.

Can all the elements be dragged and the nearby yuan swap position（Is it possible to get information about the location of the element at the end of the drag element?）?

For example, I have two elements of "A" and "B". They are arranged according to the data "clickNumber" attribute. I want to drag and move to exchange "clickNumber" value, so that I can change location and realize it.

Hello.
First of all - This is great !! Thanks a lot.
I have a problem though : When i drag a div to be in front of another Div , i CAN NOT bring the "beckend" div to be in the front whrn i click on it.
Is it can be changed ?

Yan.

If there are multiple draggable elements in the container only the first one is positioned correctly. The second ones y coordinate is not relative to the container.

public position1 = {x: 10, y: 10};
public position2 = {x: 150, y: 10};

<div class='drag-container' #myBounds>
    <div class='drag-item1' [position]="position1" [bounds]='myBounds' [inBounds]="inBounds" ngDraggable>Drag me! (1)</div>
    <div class='drag-item2' [position]="position2" [bounds]='myBounds' [inBounds]="inBounds" ngDraggable>Drag me! (2)</div>
</div>

If a user moves a div fast enough that the cursor hovers over a button or link it will break the drag until the div is clicked to reset.

Hi,

is it possible to do dragging between two containers like here:
http://jsfiddle.net/didierg/QvRjL/
?

if yes, then how can I do this?
Could you add some demo?

Thank you!

Hi,
nice api:) Where can I finde the css files of the examples like
https://xieziyu.github.io/angular2-draggable/#/usage/boundary
This are some classes...

Best regards,
Chris

How to reproduce: Instance to divs, try to move each one with one finger.
They seal each others pointer event.

Hi
I'm using NgbModal in Angular4 application. for that modal popup drag and drop, we are using angular2-draggable. it is working fine for simple "div" and it is not working as expected with ng-template

here is my sample code
<ng-template #divBranching let-c="close" let-d="dismiss"> <div ngDraggable [handle]="divDraggable" class="card" style="resize: both; overflow:hidden"> <div #divDraggable class="card-header"> <h3>Draggable Content</h3> </div> </div> </ng-template>

parent items is displaying in the same position. if i apply ngDraggable and [handle] to the ng-template we are unable to drag it. please help to fix this issue

Is there an option to position the element in a starting position? I've tried giving it translate(posX,posY) but it just ignores it and start dragging from 0,0.

Hello,
This is a nice directive.
I would like to have an opportunity to set initial value (or may be change) of a oldPosition property. I am not sure, but this property has values that I want to change.

I want to create a board with text cards, where each card has properties text: string, x,y:number.
I have created a card component and use this directive to change and track its position. I have find how to create dynamically multiple cards. What i miss is to position cards at their initial position on page load after a page reload. I have create save procedure, it saves cards text and coordinates.

Hi. I'm using this beautiful directive with ngx-bootstrap modals.
The issue is that if you open the modal (which opens at its default kind of centered position), drag it, close and open again it opens at the last dragged position not at default. Would be nice to be able to reset drag position so modals always open at their default.

What browsers is this library compatible with?

(Also, the demo site doesn't load at all with IE 11.)

Hi,
I see this.bounds = undefined by default. I have added below code to fix it. Can you recommend that is there any alternative.

private boundsCheck() { if (this.bounds == undefined || this.bounds == null) { this.bounds = this.el.nativeElement.parentElement; } let boundary = this.bounds.getBoundingClientRect(); let elem = this.el.nativeElement.getBoundingClientRect() return { 'top': boundary.top < elem.top, 'right': boundary.right > elem.right, 'bottom': boundary.bottom > elem.bottom, 'left': boundary.left < elem.left }; }

thank you

Unfortunately, in Firefox it is impossible to scroll within a draggable element by clicking and moving the handlebar.

Example: https://xieziyu.github.io/#/angular2-draggable/demo

In demo 1 & 4 it is impossible to scroll the source code horizontally by dragging the handlebar. The drag event of the element seems to override the drag event of the scrollbar itself.

Thanks for the wonderful work. I really enjoyed reading your code.

I'm wondering whether it is possible to introduce a new input parameter for the z-index. Now when the drag stopped, the z-index is reset to its original value. To make it more intuitive in a desktop windows like environment, I'm hoping when the dragging is stopped, the most current dragged window would be on top of other windows. So in this case, users of the directive could keep a record of z-index somewhere else, and this count will be increased by 1 and be assigned to the most recent dragged window's z-index value.

I'm using dialogs from ngx-boostrap package and make them draggable. Since version 1.1.0 I can't switch between input fields inside a dialog using mouse. Only tab key works. Reverting back to 1.1.0-beta.0 fixes the issue. Just wondering what could be the problem here?

The handle should really include any sub-elements of itself, so if I have a div with spans or other divs inside, those should also be part of the handle (except probably buttons).

I think this should make it behave in this way:

    // Support Mouse Events:
    @HostListener('mousedown', ['$event'])
    onMouseDown(event: any) {
        // 1. skip right click;
        // 2. if handle is set, the element can only be moved by handle (or the handle's non-button children)

        if (event.button == 2) {
            return;
        } else if (this.handle !== undefined && !this.checkChildren(event.target, this.handle)) {
            return;
        }

        this.orignal = this.getPosition(event.clientX, event.clientY);
        this.pickUp();
    }

    checkChildren(target: HTMLElement, element) {
        // Checks if the target is the element clicked, then checks each child element of element as well
        // Ignores button clicks

        // Ignore elements of type button
        if (element.tagName == 'BUTTON') return false;

        // If the target was found, return true (handle was found)
        if (element == target) return true;

        // Recursively iterate this elements children
        for (var child in element.children) {
            if (element.children.hasOwnProperty(child)) {
                if (this.checkChildren(target, element.children[child])) return true;
            }
        }

        // Handle was not found in this lineage
        // Note: return false is ignore unless it is the parent element
        return false;
    }

for example

• [snap]="10" this tell to snap every 10px
• [snap]="25"
• [snap]="50"
• [snap]="100"
• [snap]="17"

Could be possible if we can limit the drag zone by a parent div or by pixels?
For example: I want to limit zone of the draggable to the #oMap

<o-map #oMap zoom="11" min-zoom="3" max-zoom="20" zoom-control="yes" search-control="yes" draw-control="no" layer-panel-visible="false" base-layer-ids="OpenStreetMap">    
</o-map>

<div ngDraggable>
drageMe
</div>

Thanks.

This is my first ever issue-report. Sorry if it is not appropriate for whatever reason.

As far as I can tell, If any ancestor of the div you are trying to drag has a CSS scale transform, things don't work very well (at least on Chrome on Mac - have not tested elsewhere).

It is kind of hard to describe the exact symptoms - there are different problems depending on if you scale up or scale down both for simple dragging and for bounds-checking.

These problems are easy to replicate using dev tools on your demo and editing CSS to include (say) transform: scale(.75) or (say) transform: scale(1.5).

Thanks for ngDraggable!

Hi,

Would you be able to update the npm version to 1.1.0 (rather that 1.1.0-beta.0). I'd like to use the new trackPosition input in a project. I've been testing with the github version but it would be great to have it on npm.

Thanks,
David

this directive is awesome.
i wanna know that how to set the position value dynamically. thanks

My code is as follows:

HTML
"<div ngDraggable class="col col-lg-4 col-md-4 col-sm-4 visuaItem" *ngFor="let chartItem of availableCharts; let i = index;" [ngClass]="{'showItem': chartItem.isAvailable == true}" (mousedown)="onEvent($event)" (started)="onDragBegin($event)">"

JS

onDragBegin(event){
alert("HI");
}

onEvent(event) {
event.stopPropagation();
this.flag=true;
}

Could you please tell me where I am going wrong? Any help would be highly appreciated.

If I wanna set minimal and maximal values of translate positions.... i can't did it.
Please set that callback on dragging and dragEnd events

On mobile, one draggable element with the

[ngDraggable] = false

seems to broke the page scroll, that eventually works using the double tap gesture, making a small scroll,
plus the clickable element inside the scrollable one don't get the click event, even if triggering css events, i wonder if this is related to the in line Z-index applied by the directive even if set to false.
removing the directive all returned to work.

tested on iOS safari

when ngDraggable is set to false my element is still dragable.

If you click on the draggable div without dragging, then you click again and drag the div, it will instantly move off from its visible position in an apparently random direction. The more clicks before dragging, the more off the div will be when you drag it.

This behavior can be reproduced on the demo page with latest Chrome or Edge

When I drag your Demo draggables with touch there is a problem with default browser behavior.
For e.g. it scrolls when I drag them down or up.

Demo: https://xieziyu.github.io/#/angular2-draggable/demo#demo2

Maybe you have to use: Event.preventDefault(); ?

Is there any way to set the initial position of the draggable element?

Hi,

I followed the instructions you gave in the demo but I am not able to drag my element to left or right. Only top and bottom movement works. Also, if I set inBounds = false, it works as expected. Please let me know where I might be making a mistake. Thanks

Hello, Thanks for the API which is helping me a lot. I'm just wondering how to provide a textarea and input box inside a div and be able to type in the text. Currently, which is not possible even if I place an input type text then I'm not able to enter any text. is there a solution to it?

Thanks.

Add option to drag on x axis or y axis

example

• [axis]="x"
• [axis]="y"
• [axis]="xy"

The Draghandler don´t work. I can move the by clicking on the whole window.
Here is my code:

<div ngDraggable [handle]="DragHandle" class="window" >
  <div #DragHandle class="header blue" *ngIf="title">
      <h3>{{ title }}</h3>
  </div>
  <div>
    <ul>
        <ng-content></ng-content>
    </ul>
  </div>
</div>

No errors in browser-console or at ng build.
It´s angular cli 1.7.0 without any other packages

Here is the output code:
https://i.imgur.com/UCZqehl.png

Ability to tell whether or not something is being dragged.

Snap div back within bounds if dragged outside.
(parent div, defined area/size, browser window, etc.)

In Chrome 58 / 59, this module works as expected.

In other browsers, I am getting variants of the same error:

• Safari 10:

Can't find variable TouchEvent

• Firefox 53 / 54:

TouchEvent is not defined

Removing references to angular2-draggable in my project caused these errors to disappear.
Any idea what's going on here? Have I perhaps done something wrong in the setup?

Hi,
When I create a draggable component with the ComponentFactoryResolver in a ViewContainerRef, I have a problem with the events of the ngDraggable directive. The console tells me this.bounds.getBoundingClientRect is not a function. So, how can I fix it ?

PS: Sorry for my bad English

I stumbled upon this error when testing a website using this lib. All scrolling events are disabled
I believe the root cause of this is here:
@HostListener('document:touchmove', ['$event']) onTouchMove(event: any) { event.stopPropagation(); event.preventDefault(); if (this.moving && this.allowDrag) { this.moveTo(event.changedTouches[0].clientX, event.changedTouches[0].clientY); } }
Also worth noting, the use of Renderer is deprecated in favour of Renderer2

Hi, I have tried to configure angular2-draggable in my application's system.config.js without success. The config file has lines like following,

map {
...
'angular2-draggable': 'npm:angular2-draggable',
...
},
packages {
...
'angular2-draggable': {
main: 'index.js',
format: 'cjs',
defaultExtension: 'js'
}
...
}

Can you please advise?

Thanks!

当preventDefaultEvent 为 true时，可以很好的解决拖动时文本被选中的情况，但是在设置了handle后，这就会出现问题。
所有的event在开始时就会执行
event.stopPropagation();
event.preventDefault();
但是这个event的范围太大了，某些情况下，我只希望在拖动handle时关闭文本选中，而点击其他位置，可以进行文本选中。
由于现在防止事件传递的代码执行在判断是否点击的是handle之前，这就会导致在preventDefaultEvent 为 true时，整个element的文本选中功能相当于被禁止了。
是否可以解决这个问题？

Hi,
I found ng2-movable module.
It has the feature which constrain the movable

Hi,

Actual :
We use angular2-draggable with ng-bootstrap modal module.
We fix bound to be sure that the modal don't go out of the viewport.

Needed:
We need to be able to allow the modal to go out of the bottom edge.
Cause some of our modal are huge and we need to push it to the bottom to see what's behind (like Windows/Linux/Mac OS)

I will make you a pull request to show what I have in mind.

Great work, by the way.

Hi,
nice work. Is there an easy way to drag clone?
Like here http://jsfiddle.net/DP4UR/6/

And/or call a method like resetPosition() to pickup the element at current to Mouse/Touch position?

All the best.

can we have this draggable property for a modal popup ?
I am using ngx-modal to create a modal popup