{"id":1387,"date":"2018-09-26T13:39:56","date_gmt":"2018-09-26T12:39:56","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1387"},"modified":"2018-09-26T13:47:10","modified_gmt":"2018-09-26T12:47:10","slug":"jquery-drag-drop-interactive-box","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/jquery-drag-drop-interactive-box\/","title":{"rendered":"JQuery Drag Drop Interactive Box"},"content":{"rendered":"<pre class=\"lang:default decode:true \" title=\"jqDragAndMove.js\">const $ = require('jquery');\r\n\r\nlet snapToGrid = false;\r\nlet snapToRatio = true;\r\n\r\nfunction snap(v, gridSize) {\r\n    return gridSize * Math.floor((v \/ gridSize) + 0.5);\r\n}\r\n\r\nfunction snap2grid(handle) {\r\n    if (snapToGrid) {\r\n        let $target = handle.$target;\r\n        let $container = handle.$container;\r\n        let gx = $container.width() \/ 100;\r\n        let gy = $container.height() \/ 100;\r\n\r\n        let offset = $target.offset();\r\n        $target.offset({\r\n            left: snap(offset.left, gx),\r\n            top: snap(offset.top, gy)\r\n        });\r\n        $target.width(snap($target.width(), gx));\r\n        $target.height(snap($target.height(), gy));\r\n        \/\/console.log({width: $target.width() \/ gx, height: $target.height() \/ gy });\r\n    }\r\n}\r\n\r\nfunction snap2ratio(handle, newWidth, newHeight) {\r\n    if (snapToRatio) {\r\n        let ratio = handle.ratio;\r\n        let newRatio = (newWidth \/ newHeight);\r\n\r\n        if (ratio &gt; newRatio) {\r\n            newHeight = (newWidth * handle.height) \/ handle.width;\r\n        } else {\r\n            newWidth = (newHeight * handle.width) \/ handle.height;\r\n        }\r\n    }\r\n    return {\r\n        width: newWidth,\r\n        height: newHeight\r\n    };\r\n}\r\n\r\nfunction sizeX(handle, e) {\r\n    let width = Math.max(e.pageX - handle.pX + handle.width, 0);\r\n    return width;\r\n}\r\n\r\nfunction sizeY(handle, e) {\r\n    let height = Math.max(e.pageY - handle.pY + handle.height, 0);\r\n    return height;\r\n}\r\n\r\nfunction sizeXNeg(handle, e) {\r\n    let width = Math.max(handle.width - (e.pageX - handle.pX), 0);\r\n    return width;\r\n}\r\n\r\nfunction sizeYNeg(handle, e) {\r\n    let height = Math.max(handle.height - (e.pageY - handle.pY), 0);\r\n    return height;\r\n}\r\n\r\nfunction handleDrag(handle, e) {\r\n    handle.$target.offset({\r\n        left: handle.tx,\r\n        top: handle.ty\r\n    });\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_SouthEast(handle, e) {\r\n    let targetWidth = sizeX(handle, e);\r\n    let targetHeight = sizeY(handle, e);\r\n\r\n    let snapped = snap2ratio(handle, targetWidth, targetHeight);\r\n    handle.$target.width(snapped.width);\r\n    handle.$target.height(snapped.height);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_South(handle, e) {\r\n    let targetHeight = sizeY(handle, e);\r\n    handle.$target.height(targetHeight);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_SouthWest(handle, e) {\r\n    let targetWidth = sizeXNeg(handle, e);\r\n    let targetHeight = sizeY(handle, e);\r\n\r\n    let snapped = snap2ratio(handle, targetWidth, targetHeight);\r\n    \/\/ anchors are top and right\r\n    let right = handle.$target.offset().left + handle.$target.width();\r\n\r\n    handle.$target.offset({\r\n        left: (right - snapped.width)\r\n    });\r\n    handle.$target.width(snapped.width);\r\n    handle.$target.height(snapped.height);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_West(handle, e) {\r\n    let targetWidth = sizeXNeg(handle, e);\r\n    handle.$target.offset({\r\n        left: handle.tx\r\n    });\r\n    handle.$target.width(targetWidth);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_NorthWest(handle, e) {\r\n    let targetWidth = sizeXNeg(handle, e);\r\n    let targetHeight = sizeYNeg(handle, e);\r\n\r\n    let snapped = snap2ratio(handle, targetWidth, targetHeight);\r\n    \/\/ anchors are bottom and right\r\n    let bottom = handle.$target.offset().top + handle.$target.height();\r\n    let right = handle.$target.offset().left + handle.$target.width();\r\n\r\n    handle.$target.offset({\r\n        left: (right - snapped.width),\r\n        top: (bottom - snapped.height)\r\n    });\r\n    handle.$target.width(snapped.width);\r\n    handle.$target.height(snapped.height);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_North(handle, e) {\r\n    let targetHeight = sizeYNeg(handle, e);\r\n    handle.$target.offset({\r\n        top: handle.ty\r\n    });\r\n    handle.$target.height(targetHeight);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_NorthEast(handle, e) {\r\n    let targetWidth = sizeX(handle, e);\r\n    let targetHeight = sizeYNeg(handle, e);\r\n\r\n    let snapped = snap2ratio(handle, targetWidth, targetHeight);\r\n    \/\/ anchors are bottom and left\r\n    let bottom = handle.$target.offset().top + handle.$target.height();\r\n    \/\/let left = handle.$target.offset().left+handle.$target.width();\r\n\r\n    handle.$target.offset({\r\n        top: (bottom - snapped.height)\r\n    });\r\n    handle.$target.width(snapped.width);\r\n    handle.$target.height(snapped.height);\r\n    snap2grid(handle);\r\n}\r\n\r\nfunction handleResize_East(handle, e) {\r\n    let targetWidth = sizeX(handle, e);\r\n    handle.$target.width(targetWidth);\r\n    snap2grid(handle);\r\n}\r\n\r\n\/\/ Example: InteractiveBox( $('.box'), [ $e: element, move: handleDrag ] );\r\nfunction InteractiveBox($e, handles, callback, $container) {\r\n    let self = this;\r\n    self.$target = $e;\r\n    self.handles = handles;\r\n    self.$container = $container || $(window);\r\n    self.callback = callback;\r\n    self.mouseUpTimeout = null;\r\n    self.$document = $(self.$target[0].ownerDocument);\r\n\r\n    function registerHandle(handle) {\r\n        handle.active = false;\r\n        handle.$target = self.$target;\r\n        handle.$container = self.$container;\r\n\r\n        handle.$e.mousedown(\r\n            function(e) {\r\n                handle.active = true;\r\n                let p = handle.$target.offset(); \/\/position();\r\n                handle.x = p.left;\r\n                handle.y = p.top;\r\n                handle.width = handle.$target.width();\r\n                handle.height = handle.$target.height();\r\n                handle.ratio = handle.width \/ handle.height;\r\n                handle.pX = e.pageX;\r\n                handle.pY = e.pageY;\r\n\r\n                if (handle.start) {\r\n                    handle.start(handle, e);\r\n                }\r\n\r\n                e.stopPropagation();\r\n            });\r\n\r\n        handle.mouseMove = function(e) {\r\n            if (handle.active &amp;&amp; handle.move) {\r\n                snapToGrid = e.ctrlKey;\r\n                snapToRatio = e.shiftKey ? false : true;\r\n\r\n                handle.tx = handle.x + e.pageX - handle.pX;\r\n                handle.ty = handle.y + e.pageY - handle.pY;\r\n\r\n                handle.move(handle, e); \/\/ drag or resize target (x, y or xy)\r\n            }\r\n\r\n            e.stopPropagation();\r\n        };\r\n\r\n        handle.mouseUp = function(e) {\r\n            handle.active = false;\r\n            if (handle.stop) {\r\n                handle.stop(handle, e);\r\n            }\r\n\r\n            if (self.callback) {\r\n                clearTimeout(self.mouseUpTimeout);\r\n                self.mouseUpTimeout = setTimeout(function() {\r\n                    self.callback();\r\n                }, 100);\r\n            }\r\n\r\n            e.stopPropagation();\r\n        };\r\n\r\n        \/\/ Let op deze events moeten geunbind worden!\r\n        self.$document.mousemove(handle.mouseMove);\r\n        self.$document.mouseup(handle.mouseUp);\r\n    }\r\n\r\n    for (let i = 0; i &lt; self.handles.length; i += 1) {\r\n        registerHandle(self.handles[i]);\r\n    }\r\n\r\n    return self;\r\n}\r\nInteractiveBox.prototype.unbind = function() {\r\n    let self = this;\r\n    clearTimeout(self.mouseUpTimeout);\r\n\r\n    function unregisterHandle(handle) {\r\n        self.$document.unbind('mousemove', handle.mouseMove);\r\n        self.$document.unbind('mouseup', handle.mouseUp);\r\n\r\n        handle.$e.remove(); \/\/ remove element from DOM\r\n    }\r\n\r\n    for (let i = 0; i &lt; self.handles.length; i += 1) {\r\n        unregisterHandle(self.handles[i]);\r\n    }\r\n\r\n    self.$container = null;\r\n    self.$target = null;\r\n    self.handles = null;\r\n};\r\n\r\nmodule.exports = {\r\n    InteractiveBox,\r\n    handleResize_East,\r\n    handleResize_SouthEast,\r\n    handleResize_South,\r\n    handleResize_SouthWest,\r\n    handleResize_West,\r\n    handleResize_NorthWest,\r\n    handleResize_North,\r\n    handleResize_NorthEast,\r\n    handleDrag\r\n};\r\n<\/pre>\n<pre class=\"lang:default decode:true \" title=\"example.js\">registerDragMove(element) {\r\n        let self = this;\r\n        let $e = $(element);\r\n\r\n        let $dragHandle = $new('div', $e).addClass('jqHandle').addClass('jqDrag');\r\n\r\n        let $dragSE = $new('div', $e).addClass('sizeHandle').addClass('rsSE');\r\n        let $dragS = $new('div', $e).addClass('sizeHandle').addClass('rsS');\r\n        let $dragSW = $new('div', $e).addClass('sizeHandle').addClass('rsSW');\r\n        let $dragW = $new('div', $e).addClass('sizeHandle').addClass('rsW');\r\n        let $dragNW = $new('div', $e).addClass('sizeHandle').addClass('rsNW');\r\n        let $dragN = $new('div', $e).addClass('sizeHandle').addClass('rsN');\r\n        let $dragNE = $new('div', $e).addClass('sizeHandle').addClass('rsNE');\r\n        let $dragE = $new('div', $e).addClass('sizeHandle').addClass('rsE');\r\n\r\n        let handles = [];\r\n        handles.push({\r\n            $e: $dragHandle,\r\n            move: jqDrag.handleDrag\r\n        });\r\n\r\n        handles.push({\r\n            $e: $dragSE,\r\n            move: jqDrag.handleResize_SouthEast\r\n        });\r\n        handles.push({\r\n            $e: $dragS,\r\n            move: jqDrag.handleResize_South\r\n        });\r\n        handles.push({\r\n            $e: $dragSW,\r\n            move: jqDrag.handleResize_SouthWest\r\n        });\r\n        handles.push({\r\n            $e: $dragW,\r\n            move: jqDrag.handleResize_West\r\n        });\r\n        handles.push({\r\n            $e: $dragNW,\r\n            move: jqDrag.handleResize_NorthWest\r\n        });\r\n        handles.push({\r\n            $e: $dragN,\r\n            move: jqDrag.handleResize_North\r\n        });\r\n        handles.push({\r\n            $e: $dragNE,\r\n            move: jqDrag.handleResize_NorthEast\r\n        });\r\n        handles.push({\r\n            $e: $dragE,\r\n            move: jqDrag.handleResize_East\r\n        });\r\n\r\n        function callback() {\r\n            let parentWidth = $e.parent().width();\r\n            let parentHeight = $e.parent().height();\r\n\r\n            let position = $e.position();\r\n            let selfWidth = $e.width();\r\n            let selfHeight = $e.height();\r\n\r\n            let percentageLeft = round100((position.left \/ parentWidth) * 100);\r\n            let percentageTop = round100((position.top \/ parentHeight) * 100);\r\n            let percentageWidth = round100((selfWidth \/ parentWidth) * 100);\r\n            let percentageHeight = round100((selfHeight \/ parentHeight) * 100);\r\n\r\n\r\n            if (self.layer) {\r\n                self.applyLayerPosition(percentageLeft, percentageTop, percentageWidth, percentageHeight);\r\n            }\r\nlet $container = $('body');\r\n        self.interactiveBox = new jqDrag.InteractiveBox($e, handles, callback, $container);\r\n    }\r\n    unregisterDragMove() {\r\n        let self = this;\r\n        if (self.interactiveBox) {\r\n            self.interactiveBox.unbind();\r\n        }\r\n        if (self.$actions) {\r\n            self.$actions.remove();\r\n        }\r\n    }\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>const $ = require(&#8216;jquery&#8217;); let snapToGrid = false; let snapToRatio = true; function snap(v, gridSize) { return gridSize * Math.floor((v \/ gridSize) + 0.5); } function snap2grid(handle) { if (snapToGrid) { let $target = handle.$target; let $container = handle.$container; let gx = $container.width() \/ 100; let gy = $container.height() \/ 100; let offset = $target.offset(); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1387","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1387"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1387\/revisions\/1389"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}