Comments (4)
I use something similar to that, but found an issue with not being able to use the mouse to select any text in the modal-content area, so I tried to use a handle for the modal-header like this:
<div class="modal-content" ngDraggable [handle]="dragHandle">
<div class="modal-header" #dragHandle>
<button type="button" class="close" aria-label="Close" (click)="dismiss()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" [innerHtml]="title"></h4>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="dismiss()" *ngIf="showFooter">Close</button>
</div>
</div>
but with this, the user must click on an area outside the h4 but part of the modal-header to be able to drag. I've put the handle on the h4 as a workaround, but I could see this being an issue in some scenarios. Can you make the handle work on child elements, or allow for multiple handles?
from angular2-draggable.
@lafiza
I use the ModalModule
in ngx-bootstrap
to open the modal popup, so I can just add ngDraggable
in modal-content
such as:
<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<!-- Add ngDraggable Here -->
<div class="modal-content" ngDraggable>
<div class="modal-header">
<h4 class="modal-title pull-left">Static modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is static modal, backdrop click will not close it.
Click <b>×</b> to close modal.
</div>
</div>
</div>
</div>
I can test it in ngx-modal later.
from angular2-draggable.
@clabough I use your h4 approach, thanks. In order to make the whole header as a drag handle I modified bootstrap styles a bit:
.modal-header {padding: 0}
.modal-header h4 {padding: 15px}
.modal-header button.close {margin: 15px}
from angular2-draggable.
@ctrl-brk, @clabough, I just moved #dragHandle from <div class="modal-header> to
from angular2-draggable.
Related Issues (20)
- click event eaten by title attribute, when draggable
- Overlapping Draggable Element
- Draggable action for parent and child element
- click is not called only at first
- scaled parent bug on resizable HOT 2
- Drag and drop items using the library
- Angular10 support HOT 1
- Move with arrow keys feature
- Issue with ngDraggable boundsCheck() if out of bounds.
- Swapping elements
- my drag not showing resize handle HOT 2
- Draggable/Resizeable element moves off the position in Angular 10+
- [Easy] If position values are strings, draggable behavior is erratic
- Set movingOffset progmatically
- rzMaxHeight not working properly
- rzAspectRatio does not work on dynamically added div
- New Feature of showing smart guides and multiple drag
- New event rzBeforeStart is required
- Handle Size disrupting the element size when it has to be exact
- resizeable's w only style error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-draggable.