How to make draggable div resizable using jquery-ui
Question
I have created few widgets, which should be draggable anywhere on the screen and resizable by the user. I managed to make them draggable , but can't make them resizable . here is the fiddle:
https://jsfiddle.net/vaxobasilidze/reL880g8/
What am I doing wrong? I have other elements too, which I make draggable and resizable by the same way, but for an unknown reason this does not work only on this widget.
function foo(){ $('.channel').each(function() { $(this).draggable({ containment: $('.screens'), stack: '.channel', drop: function (event, ui) { }, drag: function(){ var draggedItemId = $(this).attr('id'); }, stop: function(){ var draggedItemId = $(this).attr('id'); } }).resizable(); }); } function makeDraggable(){ var height = $('.channels').height(); $('.ram').draggable({ stack: '.ram', }).resizable(); } makeDraggable(); foo();
html { margin: 0; padding: 0; width: 100%; height: 100%; background: #2c2c2c; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313)); background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1); } body { margin: 0; padding: 0; width: 100%; height: 100%; color: #b8c0c8; background: rgba(0, 0, 0, 0.3); } .ram { width: 250px; height: 140px; min-width: 250px; min-height: 140px; border: none; background: none; box-shadow: none; resize: none; padding: 7px; border: 1px solid grey; } .ram:hover { resize: both; } #ramUsageContainer { width: 100%; height: 100%; position: relative; } #ramUsageContainer svg { -webkit-filter: drop-shadow(0 0 3px #647384 ); filter: drop-shadow(0 0 3px #647384 ); } .usageHeader { width: 100%; text-align: center; font-size: 24px; position: absolute; top: 25%; } .usagePercent { width: 100%; text-align: center; font-size: 30px; position: absolute; top: 40%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head runat="server"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script> <body> <div class="channel elementTable widget ui-draggable ui-draggable-handle Usage ram widgetDropped ui-resizable" name="RAM" id="2" style="left: 564px; top: 284px; z-index: 1003;" oncontextmenu="return false;"> <div id="ramUsageContainer"> <p class="usageHeader">RAM Usage</p> <p class="usagePercent">65.7%</p> <svg viewBox="0 0 100 50"> <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="#353740" stroke-width="6" fill-opacity="0"></path> <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="rgb(167,87,0)" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 147.708, 147.708; stroke-dashoffset: 50.6639;"></path> </svg> </div> </div> </body>
3 answers
solution1
1 ACCPTED 2018-02-13 13:26:44
function foo(){ $('.channel').each(function() { $(this).resizable().draggable({ containment: $('.screens'), stack: '.channel', drop: function (event, ui) { }, drag: function(){ var draggedItemId = $(this).attr('id'); }, stop: function(){ var draggedItemId = $(this).attr('id'); } }); }); } function makeDraggable(){ var height = $('.channels').height(); $('.ram').resizable().draggable({ stack: '.ram', }); } makeDraggable(); foo();
html { margin: 0; padding: 0; width: 100%; height: 100%; background: #2c2c2c; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313)); background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1); } body { margin: 0; padding: 0; width: 100%; height: 100%; color: #b8c0c8; background: rgba(0, 0, 0, 0.3); } .ram { width: 250px; height: 140px; min-width: 250px; min-height: 140px; border: none; background: none; box-shadow: none; resize: none; padding: 7px; border: 1px solid grey; } .ram:hover { resize: both; } #ramUsageContainer { width: 100%; height: 100%; position: relative; } #ramUsageContainer svg { -webkit-filter: drop-shadow(0 0 3px #647384 ); filter: drop-shadow(0 0 3px #647384 ); } .usageHeader { width: 100%; text-align: center; font-size: 24px; position: absolute; top: 25%; } .usagePercent { width: 100%; text-align: center; font-size: 30px; position: absolute; top: 40%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head runat="server"> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/> <body> <div class="channel elementTable widget ui-draggable ui-draggable-handle Usage ram widgetDropped ui-resizable" name="RAM" id="2" style="left: 564px; top: 284px; z-index: 1003;" oncontextmenu="return false;"> <div class="ui-resizable-handle ui-resizable-e"></div> <div class="ui-resizable-handle ui-resizable-s"></div> <div id="ramUsageContainer"> <p class="usageHeader">RAM Usage</p> <p class="usagePercent">65.7%</p> <svg viewBox="0 0 100 50"> <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="#353740" stroke-width="6" fill-opacity="0"></path> <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="rgb(167,87,0)" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 147.708, 147.708; stroke-dashoffset: 50.6639;"></path> </svg> </div> </div> </body>
One more update is add resizable first then call draggable like $(this).resizable().draggable() I did such changes into the code. you can use the same code now.
solution2
1 2018-02-20 06:49:25
I have found a problem in my code. Code was correct, simply because of unknown reasons, after loading saved diagram application was creating new resize sensors on widgets borders. So I had few resize sensors placed on top of each other, but only one of them was working, which I could not click on. The perfect solution for me was to simply delete old resize sensors with this code:
$('.channel .resize-sensor').remove();
$('.channel .ui-resizable-handle').remove();
After that, I simply call another function that makes them draggable and resizable:
makeDraggable();
solution3
0 2018-02-13 13:28:12
you can achieve this by using java-script here is working demo and in Css The only important style is position: absolute, the rest is up to you:
dragElement(document.getElementById(("mydiv"))); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } }
#mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; width: 300px; resize: both; overflow: auto; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div>
reference from:- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery-UI: resizable - how to increase size of draggable edge?
How to make a jquery-ui widget draggable
jQuery-ui draggable and resizable div can't resize from the left properly
How to enable scrollbar in draggable jquery-ui div
Jquery UI : How to make a dragable div resizable
How to make entire DOM draggable & resizable via jQuery UI?
How to set multiple Jquery-UI resizable?
jQuery UI - make div not resizable
Why is jquery-ui resizable assigning width to div with “alsoResize”?
Jquery-ui resizable function not working proparly with a flexbox div
Related Tags