+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Draggable And Resizable Wizard
+Make Every Backend + Wizard In Odoo Resizable And Draggable.
+ +
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+ This module helps to Make Every Wizard In Odoo Resizable And Draggable
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+ 
+ Make Every Wizard Draggable And Resizable.
+
+
+ Make Every Wizard Draggable And Resizable.
+
+
+
+
+ Available in Odoo 15.0
+ Community, Enterprise and Odoo sh.
+
+
+
+ Available in Odoo 15.0
+ Community, Enterprise and Odoo sh.
+
+
+
+ 
+
+
+ Screenshots +
+
+
\ No newline at end of file
diff --git a/dragable_and_resizable_wizard/static/src/css/dragable.css b/dragable_and_resizable_wizard/static/src/css/dragable.css
new file mode 100644
index 000000000..fd2e3e5e6
--- /dev/null
+++ b/dragable_and_resizable_wizard/static/src/css/dragable.css
@@ -0,0 +1,7 @@
+.modal-content{
+ resize: both;
+ overflow: auto;
+}
+.modal-header{
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/dragable_and_resizable_wizard/static/src/js/draggable_wiz.js b/dragable_and_resizable_wizard/static/src/js/draggable_wiz.js
new file mode 100644
index 000000000..b86a02e85
--- /dev/null
+++ b/dragable_and_resizable_wizard/static/src/js/draggable_wiz.js
@@ -0,0 +1,53 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { Dialog } from "@web/core/dialog/dialog";
+const { onMounted } = owl.hooks;
+//This code defines a function called "draggable" that enables a DOM element to be
+// dragged around the screen by clicking and dragging it. This function is called
+// in the "mount" method of a Dialog object, which is part of the Owl web framework.
+//Parameters:
+//- el (object): The event object that triggered the function. This is used to get the target element that should be draggable.
+patch(Dialog.prototype,'dragable_and_resizable_wizard',{
+ /**
+ * Modifies the `Dialog` prototype's `setup` method to include the `mount` method.
+ */
+ setup() {
+ this._super.apply();
+ onMounted(this.mount);
+ },
+ /**
+ * Attaches a `click` event listener to the dialog element to enable dragging.
+ */
+ mount(){
+ this.el.querySelector(".modal-content").addEventListener('click', this.draggable)
+ },
+ /**
+ * Attaches event listeners to the dialog element for `mousedown`, `mousemove`, and `mouseup` events,
+ * enabling the user to drag the element around the screen.
+ * @param {MouseEvent} el - The `mousedown` event.
+ */
+ draggable(el) {
+
+ el.target.addEventListener('mousedown', function(e) {
+ var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
+ var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
+ function mouseMoveHandler(e) {
+ el.target.style.top = (e.clientY - offsetY) + 'px';
+ el.target.style.left = (e.clientX - offsetX) + 'px';
+ }
+ function reset() {
+ window.removeEventListener('mousemove', mouseMoveHandler);
+ window.removeEventListener('mouseup', reset);
+ return
+ }
+ if (e.target.className === "modal-header"){
+ window.addEventListener('mousemove', mouseMoveHandler);
+ window.addEventListener('mouseup', reset);
+ }
+
+ });
+ },
+});
+//Once you have created the dialog and added the draggable function, you can use
+//the dialog in your application and the user will be able to drag it around
+//the screen by clicking and dragging the dialog's title bar.
\ No newline at end of file
+
+
+
+
+
+
+ +
++ -> + Make Every Backend Wizards In Odoo Draggable And Resizable.
+
+
+
+
+ 
+
+
+ Related + Products +
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+